2012-12-21 62 views
8

我试图将鼠标在Google地图上的位置转换为LatLng对象。我看到从与谷歌地图获得位置相当多的帖子“click”事件等,类似这样的:从鼠标位置获取地图纬度经度

google.maps.event.addListener(map, 'click', function(event) { 
    mouseLocation = event.latLng; 
}); 

但是,这并不因为我不响应地图的事件,我的目的工作,我正在回应“tapHold”事件。在tapHold事件中,我想获取当前鼠标位置的经纬度。其实我可以看到这样的功能在很多方面都有用,而不仅仅是一个tapHold事件。

我可以想到一些黑客,在飞行中创建一个mouseover事件,然后只让它触发一次,并从rollover事件中获取LatLng对象后将其删除,但对我来说,似乎有些ha ... ......寻找更优雅的解决方案。谢谢!

回答

13

有几种功能使用像素,使用它们需要先访问投影。

从地图对象

map.getProjection().fromPointToLatLng(new google.maps.Point(x, y)) 

从覆盖对象:

overlay.getProjection().fromContainerPixelToLatLng(new google.maps.Point(x, y)); 

你可以用虚拟的覆盖也这么做:

var overlay = new google.maps.OverlayView(); 
overlay.draw = function() {}; 
overlay.setMap(map); 

这里是一个参考该文件:https://developers.google.com/maps/documentation/javascript/reference#Projection

+0

什么是x,在你的例子中,这是唯一的错误,我得到... –

3

如果您不需要非常精确的值,你可以自己根据地图(偏差在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> 
相关问题