从Google标记获取Lat / Lng

我用可拖动的标记制作了Google Maps地图。 当用户拖动标记时，我需要知道新的纬度和经度，但我不明白什么是最好的方法来做到这一点。

我如何检索新的坐标？

Answer 1

这里是JSFiddle演示 。 在Google Maps API V3中，跟踪可拖动标记的纬度和经度非常简单。 我们以下面的HTML和CSS作为基础。

<div id='map_canvas'></div> <div id="current">Nothing yet...</div> #map_canvas{ width: 400px; height: 300px; } #current{ padding-top: 25px; } 

这是我们最初的JavaScript初始化谷歌地图。 我们创build一个我们想要拖动的标记，并将其可拖动属性设置为true。 当然要记住，它应该被附加到你的窗口的onload事件，它被加载，但我会跳到代码：

 var map = new google.maps.Map(document.getElementById('map_canvas'), { zoom: 1, center: new google.maps.LatLng(35.137879, -82.836914), mapTypeId: google.maps.MapTypeId.ROADMAP }); var myMarker = new google.maps.Marker({ position: new google.maps.LatLng(47.651968, 9.478485), draggable: true }); 

在这里，我们附加两个事件dragstart来跟踪拖动开始， dragend拖到标记停止拖动时，我们附加它的方式是使用google.maps.event.addListener 。 我们在这里做的是当标记被拖动时设置div current的内容，然后在拖动停止时设置标记的lat和lng。 Google鼠标事件的属性名称为“latlng”，当事件触发时返回“google.maps.LatLng”对象。 所以，我们在这里所做的基本上是使用由google.maps.event.addListener返回的侦听器的标识符，并获取属性latLng来提取dragend的当前位置。 一旦我们得到这个Lat Lng当拖动停止时，我们将显示在您current div：

 google.maps.event.addListener(myMarker, 'dragend', function(evt){ document.getElementById('current').innerHTML = '<p>Marker dropped: Current Lat: ' + evt.latLng.lat().toFixed(3) + ' Current Lng: ' + evt.latLng.lng().toFixed(3) + '</p>'; }); google.maps.event.addListener(myMarker, 'dragstart', function(evt){ document.getElementById('current').innerHTML = '<p>Currently dragging marker...</p>'; }); 

最后，我们将中心标记显示在地图上：

 map.setCenter(myMarker.position); myMarker.setMap(map); 

如果您对我的回答有任何疑问，请告诉我。

Answer 2

你可以在Marker上调用getPosition() – 你试过了吗？

如果您使用的是JavaScript API的弃用版，则可以在GMarker上调用getLatLng() 。

Answer 3

 var lat = marker.getPosition().lat(); var lng = marker.getPosition().lng(); 

更多信息可以在Google Maps API – LatLng中find

Answer 4

尝试这个

 var latlng = new google.maps.LatLng(51.4975941, -0.0803232); var map = new google.maps.Map(document.getElementById('map'), { center: latlng, zoom: 11, mapTypeId: google.maps.MapTypeId.ROADMAP }); var marker = new google.maps.Marker({ position: latlng, map: map, title: 'Set lat/lon values for this property', draggable: true }); google.maps.event.addListener(marker, 'dragend', function (event) { document.getElementById("latbox").value = this.getPosition().lat(); document.getElementById("lngbox").value = this.getPosition().lng(); }); 

Answer 5

 // show the marker position // console.log( objMarker.position.lat() ); console.log( objMarker.position.lng() ); // create a new point based into marker position // var deltaLat = 1.002; var deltaLng = -1.003; var objPoint = new google.maps.LatLng( parseFloat( objMarker.position.lat() ) + deltaLat, parseFloat( objMarker.position.lng() ) + deltaLng ); // now center the map using the new point // objMap.setCenter( objPoint ); 

Answer 6

您应该在标记上添加一个侦听器，并监听drag或dragend事件，并在收到此事件时询问事件的位置。

请参阅http://code.google.com/intl/fr/apis/maps/documentation/javascript/reference.html#Marker以了解标记触发的事件的说明。; 有关允许添加事件侦听器的方法，请参阅http://code.google.com/intl/fr/apis/maps/documentation/javascript/reference.html#MapsEventListener 。

Answer 7

这个问题有很多答案，对我来说从来没有（包括build议getPosition（）这似乎不是一个方法可用于标记对象）。 在地图V3中唯一适用于我的方法是（简单地）：

 var lat = marker.lat(); var long = marker.lng();