我制作了一张带有可拖动标记的 Google map 。当用户拖动标记时,我需要知道新的纬度和经度,但我不知道这样做的最佳方法是什么。
如何检索新坐标?
最佳答案
这是 JSFiddle Demo .在 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。我们创建了一个我们想要拖动的标记并将其 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
在标记停止被拖动时附加到 drack,我们附加它的方式是使用 google.maps.event.addListener
。我们在这里所做的是在拖动标记时设置 div current
的内容,然后在拖动停止时设置标记的纬度和经度。谷歌鼠标事件有一个属性名称“latlng”,当事件触发时返回“google.maps.LatLng”对象。所以,我们在这里所做的基本上是使用由 google.maps.event.addListener
返回的此监听器的标识符,并获取属性 latLng
来提取 dragend 的当前位置。一旦我们在拖动停止时获得经纬度,我们将在您的 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 上:
map.setCenter(myMarker.position);
myMarker.setMap(map);
如果您对我的回答有任何疑问,请告诉我。
关于javascript - 从谷歌标记获取纬度/经度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5290336/