从谷歌标记获取Lat/Lng

Question

我制作了带有可拖动标记的Google地图地图.当用户拖动标记时,我需要知道新的纬度和经度,但我不明白这样做的最佳方法是什么.

如何检索新坐标？

Answer 1

这是JSFiddle演示.在Google Maps API V3中,跟踪可拖动标记的lat和lng非常简单.让我们从以下HTML和CSS开始.

<div id='map_canvas'></div>
<div id="current">Nothing yet...</div>

#map_canvas{
    width: 400px;
    height: 300px;
}

#current{
     padding-top: 25px;
}

这是我们初始化JavaScript初始化谷歌地图.我们创建一个我们想要拖动的标记,并将其draggable属性设置为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.我们在这里做的current是在拖动标记时设置div 的内容,然后在拖动停止时设置标记的lat和lng.Google鼠标事件的属性名称为"latlng",在事件触发时返回"google.maps.LatLng"对象.所以,我们在这里做的基本上是使用由此返回的侦听器的标识符,google.maps.event.addListener并获取属性latLng以提取dragend的当前位置.一旦我们在拖动停止时获得Lat Lng,我们将在您的currentdiv中显示:

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

你可以只调用getPosition()的Marker -你试过了吗？

如果你是JavaScript API的弃用,V2,你可以叫getLatLng()上GMarker.

Answer 3

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

有关详细信息,请访问Google Maps API - LatLng

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