Javascript 从鼠标位置获取地图纬度经度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13984338/
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
get map latitude longitude from mouse position
提问by botbot
I am trying to convert the position of the mouse on a google map into a LatLng object. I see quite a few posts on getting the position from with the google map "click" event etc, like this:
我正在尝试将鼠标在谷歌地图上的位置转换为 LatLng 对象。我看到很多关于使用谷歌地图“点击”事件等获取位置的帖子，如下所示：
google.maps.event.addListener(map, 'click', function(event) {
mouseLocation = event.latLng;
});
But, this doesn't work for my purposes because I am not responding to a map event, I'm responding to a 'tapHold' event. Inside the tapHold event I'd like to get the latitude and longitude of the current mouse position. Actually I could see a function like this being useful in many ways beyond just a tapHold event.
但是，这对我的目的不起作用，因为我不是在响应地图事件，而是在响应 'taphold' 事件。在 tapHold 事件中，我想获取当前鼠标位置的纬度和经度。实际上，我可以看到这样的函数在许多方面都非常有用，而不仅仅是一个 tapHold 事件。
I can think of some hacks like, to create a mouseover event on the fly, then only let it fire once and delete it after getting the LatLng object from the rollover event, but, seems sorta hackish to me... Looking for a more elegant solution. Thanks!
我可以想到一些技巧，例如动态创建鼠标悬停事件，然后只让它触发一次并在从翻转事件中获取 LatLng 对象后将其删除，但是，对我来说似乎有点黑客......优雅的解决方案。谢谢！
回答by Nils
There are several function for working with pixels, to use them you need to access the projection first.
有几个用于处理像素的函数，要使用它们，您需要先访问投影。
From the map object
从地图对象
map.getProjection().fromPointToLatLng(new google.maps.Point(x, y))
From an overlay object:
从叠加对象：
overlay.getProjection().fromContainerPixelToLatLng(new google.maps.Point(x, y));
You can do this with a dummy overlay as well:
您也可以使用虚拟覆盖来执行此操作：
var overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map);
Here is an reference to the documentation: https://developers.google.com/maps/documentation/javascript/reference#Projection
这是对文档的参考：https: //developers.google.com/maps/documentation/javascript/reference#Projection
回答by bicycle
google.maps.event.addListener(map, 'mousemove', function (event) {
displayCoordinates(event.latLng);
});
function displayCoordinates(pnt) {
var lat = pnt.lat();
lat = lat.toFixed(4);
var lng = pnt.lng();
lng = lng.toFixed(4);
console.log("Latitude: " + lat + " Longitude: " + lng);
}
资料来源：http: //seydahatipoglu.wordpress.com/2012/10/21/how-to-display-cursor-coordinates-in-google-map-javascript/
回答by benbai123
If you do not need a very accurate value, you can calculate it yourself based on the bounds of map (bias under 1%):
如果不需要非常精确的值，可以根据map的bounds（偏差在1%以下）自己计算：
<!DOCTYPE html>
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(33.397, -81.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions
);
google.maps.event.addListener(map, 'click', function(event) {
document.getElementById('latMap').value = event.latLng.lat();
document.getElementById('lngMap').value = event.latLng.lng();
});
}
function mapDivClicked (event) {
var target = document.getElementById('map_canvas'),
posx = event.pageX - target.offsetLeft,
posy = event.pageY - target.offsetTop,
bounds = map.getBounds(),
neLatlng = bounds.getNorthEast(),
swLatlng = bounds.getSouthWest(),
startLat = neLatlng.lat(),
endLng = neLatlng.lng(),
endLat = swLatlng.lat(),
startLng = swLatlng.lng();
document.getElementById('posX').value = posx;
document.getElementById('posY').value = posy;
document.getElementById('lat').value = startLat + ((posy/350) * (endLat - startLat));
document.getElementById('lng').value = startLng + ((posx/500) * (endLng - startLng));
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas" onclick="mapDivClicked(event);" style="height: 350px; width: 500px;"></div>
x: <input id="posX" />
y: <input id="posY" />
lat: <input id="lat" />
lng: <input id="lng" />
<div />
lat from map: <input id="latMap" />
lng from map: <input id="lngMap" />
</body>
</html>
