从Google标记获取Lat / Lng

问题描述

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

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.

我怎么能检索新的坐标？

How can I retrieve the new coordinates?

推荐答案

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

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.

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

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

#current{
     padding-top: 25px;
}

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

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:

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 变为drack，我们附加它的方式是使用 google.maps.event.addListener 。我们在这里做的是在标记被拖动时设置div current 的内容，然后在拖动停止时设置标记的lat和lng。 Google鼠标事件的属性名称为'latlng'，当事件触发时返回'google.maps.LatLng'对象。因此，我们在这里所做的基本上是使用由 google.maps.event.addListener 返回的此侦听器的标识符并获取属性 latLng 来提取dragend的当前位置。当拖动停止后我们得到Lat Lng后，我们将显示在当前 div中：

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:

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.

这篇关于从Google标记获取Lat / Lng的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！