Javascript Google Maps HTML5 点击获取经纬度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8026960/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Maps HTML5 click to get lat, long
提问by toy
I'm trying to build a mobile HTML5 webapp in which user can click on the map to get lat/long from Google Maps. Is there a code example? I tried googling but only found some website that does that but no soucecode example.
我正在尝试构建一个移动 HTML5 网络应用程序，用户可以在其中单击地图以从 Google 地图获取纬度/经度。有代码示例吗？我试过谷歌搜索，但只找到了一些这样做的网站，但没有源代码示例。
This is because I'm going to use HTML5 geolocation to display the current location first, but if it's not accurate then users can specify that by themselves.
这是因为我将首先使用 HTML5 地理定位来显示当前位置，但如果它不准确，那么用户可以自己指定。
Thanks a lot.
非常感谢。
回答by LiamB
The code below will show you how to get the Long and Lat when the user clicks the map - 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() );
});
回答by m-tech
I want to show you complete answere:
我想向您展示完整的答案：
this is main part of the code the event is based on click and get Lat/Long with click and show it at alert()
这是代码的主要部分，该事件基于单击并通过单击获取纬度/经度并将其显示在alert()
google.maps.event.addListener(map, 'click', function(event) { alert(event.latLng.lat() + ", " + event.latLng.lng()); });
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>
please change your API KEY
请更改您的 API KEY
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"
put your API KEY between key=and &callback:
将您的 API KEY 放在key=和&callback 之间：
https://maps.googleapis.com/maps/api/js?key=@@@@@@@ &callback=myMap
https://maps.googleapis.com/maps/api/js?key=@@@@@@@＆回调= MYMAP
回答by Ashish Gupta
You have to use event argument.
您必须使用事件参数。
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.
});
