谷歌地图HTML5点击获取纬度和经度

Question

谷歌地图HTML5点击获取纬度和经度

javascripthtmlgoogle-maps

33

我正在尝试构建一个移动HTML5 Web应用程序，用户可以在地图上单击以获取Google Maps的纬度/经度。是否有代码示例？我尝试过搜索，但只找到了一些能够实现此功能的网站，但没有源代码示例。

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

非常感谢。

- toy

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

3个回答

6

我希望向您展示完整的答案：

这是代码的主要部分，事件基于点击，并通过单击获取Lat/Long并在alert()中显示。

google.maps.event.addListener(map, 'click', function(event) { alert(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。

将您的API KEY放置在key=和&callback之间： https://maps.googleapis.com/maps/api/js?key= @@@@@@@ &callback=myMap

- m-tech

能否请您建议一下如何提供给定中心点的所有经纬度和子半径。 - Rohitesh

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.
 });

- Ashish Gupta

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- LiamB · Accepted Answer

以下代码将向您展示如何在用户单击地图时获取经度和纬度 - 允许用户在谷歌地图上放置标记

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