废话少说，代码你懂得：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Google Maps API Sample</title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
//初始化地图
function initialize()
{
var latlng = new google.maps.LatLng(30.26, 120.19);
var myOptions =
{
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//不用Var声明，作为全局变量使用
map = new google.maps.Map(document.getElementById("google_map"), myOptions);
//监听鼠标移动、点击的动作，并调用事件函数
google.maps.event.addListener(map, 'mousemove', function (event) { getCoordinate(event.latLng); });
google.maps.event.addListener(map, 'click', function (event) { getPoint(event.latLng); });
}
//鼠标移动时获取的经纬度
function getCoordinate(location)
{
document.getElementById("point_x").value = location.Xa;
document.getElementById("point_y").value = location.Ya;
}
//鼠标点击获取指定点的经纬度
function getPoint(point)
{
document.getElementById("show_x").value = point.Xa;
document.getElementById("show_y").value = point.Ya;
}
//定位到指定坐标的位置，并将该点设为地图中心
function getLocation()
{
var pointX = document.getElementById("show_x").value;
var pointY = document.getElementById("show_y").value;
var targLatLng = new google.maps.LatLng(pointX, pointY);
map.setZoom(14);
map.setCenter(targLatLng);
}
</script>
</head>
<body onload="initialize()">
<div id="google_map" style="width: 100%; height: 600px">
</div>
<input type="text" value="鼠标经过处经纬度:" />
<input id="point_x" type="text" />
<input id="point_y" type="text" />
<input type="text" value="鼠标单击处经纬度:" />
<input id="show_x" type="text" />
<input id="show_y" type="text" />
<input id="btnLocation" type="button" value="定位" onclick="getLocation()" />
</body>
</html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Google Maps API Sample</title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
//初始化地图
function initialize()
{
var latlng = new google.maps.LatLng(30.26, 120.19);
var myOptions =
{
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//不用Var声明，作为全局变量使用
map = new google.maps.Map(document.getElementById("google_map"), myOptions);
//监听鼠标移动、点击的动作，并调用事件函数
google.maps.event.addListener(map, 'mousemove', function (event) { getCoordinate(event.latLng); });
google.maps.event.addListener(map, 'click', function (event) { getPoint(event.latLng); });
}
//鼠标移动时获取的经纬度
function getCoordinate(location)
{
document.getElementById("point_x").value = location.Xa;
document.getElementById("point_y").value = location.Ya;
}
//鼠标点击获取指定点的经纬度
function getPoint(point)
{
document.getElementById("show_x").value = point.Xa;
document.getElementById("show_y").value = point.Ya;
}
//定位到指定坐标的位置，并将该点设为地图中心
function getLocation()
{
var pointX = document.getElementById("show_x").value;
var pointY = document.getElementById("show_y").value;
var targLatLng = new google.maps.LatLng(pointX, pointY);
map.setZoom(14);
map.setCenter(targLatLng);
}
</script>
</head>
<body onload="initialize()">
<div id="google_map" style="width: 100%; height: 600px">
</div>
<input type="text" value="鼠标经过处经纬度:" />
<input id="point_x" type="text" />
<input id="point_y" type="text" />
<input type="text" value="鼠标单击处经纬度:" />
<input id="show_x" type="text" />
<input id="show_y" type="text" />
<input id="btnLocation" type="button" value="定位" onclick="getLocation()" />
</body>
</html>
这是运行后的效果图：
【推荐】还在用 ECharts 开发大屏？试试这款永久免费的开源 BI 工具！
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步