Google Maps HTML5 点击获取经纬度答案

【问题标题】：Google Maps HTML5 click to get lat, longGoogle Maps HTML5 点击获取经纬度
【发布时间】：2011-11-06 12:21:19
【问题描述】：

我正在尝试构建一个移动 HTML5 网络应用程序，用户可以在其中单击地图以从 Google 地图获取纬度/经度。有代码示例吗？我尝试了谷歌搜索，但只找到了一些这样做的网站，但没有源代码示例。

这是因为我将首先使用 HTML5 地理位置来显示当前位置，但如果它不准确，那么用户可以自己指定。

非常感谢。

【问题讨论】：

我确信那里有真正的教程资源，但您也可以查看网站的源代码......

标签： javascript html google-maps

【解决方案1】：

下面的代码将向您展示如何在用户单击地图时获取经度和纬度 - Allow user to place marker on a google map

google.maps.event.addListener(map, 'click', function( event ){
  alert( "Latitude: "+event.latLng.lat()+" "+", longitude: "+event.latLng.lng() ); 
});

【讨论】：

这很棒。 Kinda 认为这是来自 Google Maps API 参考。但是，当您触摸地图以移动或定位它时会触发此事件（光标变为闭合手）。其他语言的鼠标按下。你会如何在 Mouse Up 上触发它？

【解决方案2】：

我想给你看完整的答案：

这是事件基于点击的代码的主要部分，通过点击获取纬度/经度并在 alert()

处显示

google.maps.event.addListener(map, 'click', function(event) { 警报(event.latLng.lat() + ", " + event.latLng.lng()); });

<!DOCTYPE html>
<html>
<body>
<div id="googleMap" style="width:100%;height:400px;"></div>

<script>
function myMap() {
var mapProp= {
    center:new google.maps.LatLng(51.508742,-0.120850),
    zoom:5,
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

google.maps.event.addListener(map, 'click', function(event) {
alert(event.latLng.lat() + ", " + event.latLng.lng());
});

}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script>
</body>
</html>

请更改您的 API KEY

src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"

将您的 API KEY 放在 key= 和 &callback 之间：

https://maps.googleapis.com/maps/api/js?key=@@@@@@@ &callback=myMap

【讨论】：

你能建议如何建议所有纬度与给定中心的子半径。

【解决方案3】：

你必须使用事件参数。

 google.maps.event.addListener(map, 'click', function(event) {
     marker = new google.maps.Marker({position: event.latLng, map: map});
     console.log(event.latLng);   // Get latlong info as object.
     console.log( "Latitude: "+event.latLng.lat()+" "+", longitude: "+event.latLng.lng()); // Get separate lat long.
 });

【讨论】：