从鼠标位置获取地图纬度经度

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!

我可以想到一些黑客，比如，在飞行中创建一个鼠标悬停事件，然后只让它触发一次并在从rollover事件中获取LatLng对象后将其删除，但是，似乎对我来说是个hackish ...寻找更多优雅的解决方谢谢！

3 个解决方案

#1

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

Source: http://seydahatipoglu.wordpress.com/2012/10/21/how-to-display-cursor-coordinates-in-google-map-javascript/

资料来源：http：//seydahatipoglu.wordpress.com/2012/10/21/how-to-display-cursor-coordinates-in-google-map-javascript/

#2

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

#3

If you do not need a very accurate value, you can calculate it yourself based on the bounds of map (bias under 1%):

如果您不需要非常准确的值，您可以根据地图的边界自行计算（偏差低于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>

#1

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