从谷歌标记获取Lat / Lng

I made a Google Maps map with a draggable marker. When the user drags the marker, I need to know the new latitude and longitude, but I don't understand what is the best approach to doing that.

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

How can I retrieve the new coordinates?

如何检索新坐标？

7 个解决方案

#1

114

Here is the JSFiddle Demo. In Google Maps API V3 it's pretty simple to track the lat and lng of a draggable marker. Let's start with the following HTML and CSS as our base.

这是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;
}

Here is our initial JavaScript initializing the google map. We create a marker that we want to drag and set it's draggable property to true. Of course keep in mind it should be attached to an onload event of your window for it to be loaded, but i'll skip to the code:

这是我们初始化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
});

Here we attach two events dragstart to track the start of dragging and dragend to drack when the marker stop getting dragged, and the way we attach it is to use google.maps.event.addListener. What we are doing here is setting the div current's content when marker is getting dragged and then set the marker's lat and lng when drag stops. Google mouse event has a property name 'latlng' that returns 'google.maps.LatLng' object when the event triggers. So, what we are doing here is basically using the identifier for this listener that gets returned by the google.maps.event.addListener and get the property latLng to extract the dragend's current position. Once we get that Lat Lng when the drag stops we'll display within your current div:

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

Lastly, we'll center our marker and display it on the map:

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

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

Let me know if you have any questions regarding my answer.

如果您对我的回答有任何疑问，请与我们联系。

#2

You could just call getPosition() on the Marker - have you tried that?

你可以在Marker上调用getPosition（） - 你试过吗？

If you're on the deprecated, v2 of the JavaScript API, you can call getLatLng() on GMarker.

如果您使用的是JavaScript API的弃用v2，则可以在GMarker上调用getLatLng（）。

#3

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

More information can be found at Google Maps API - LatLng

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

#4

try this

尝试这个

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

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

#6

You should add a listener on the marker and listen for the drag or dragend event, and ask the event its position when you receive this event.

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

See http://code.google.com/intl/fr/apis/maps/documentation/javascript/reference.html#Marker for the description of events triggered by the marker. And see http://code.google.com/intl/fr/apis/maps/documentation/javascript/reference.html#MapsEventListener for methods allowing to add event listeners.

有关标记触发的事件的说明，请参阅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。

#7

-1

There are a lot of answers to this question, which never worked for me (including suggesting getPosition() which doesn't seem to be a method available for markers objects). The only method that worked for me in maps V3 is (simply) :

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

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

#1

114