Javascript 从谷歌标记获取纬度/经度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5290336/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Getting Lat/Lng from Google marker
提问by Genadinik
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 Maps 地图。当用户拖动标记时，我需要知道新的纬度和经度，但我不明白这样做的最佳方法是什么。
How can I retrieve the new coordinates?
如何检索新坐标？
回答by u476945
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 中，跟踪可拖动标记的经纬度非常简单。让我们从以下 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 dragstartto track the start of dragging and dragendto 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.addListenerand get the property latLngto extract the dragend's current position. Once we get that Lat Lng when the drag stops we'll display within your currentdiv:
在这里，我们附加了两个事件dragstart来跟踪拖动的开始和dragend在标记停止拖动时进行拖动，我们附加它的方式是使用google.maps.event.addListener. 我们在这里所做的current是在拖动标记时设置 div的内容，然后在拖动停止时设置标记的 lat 和 lng。谷歌鼠标事件有一个属性名称“latlng”，它在事件触发时返回“google.maps.LatLng”对象。因此，我们在这里所做的基本上是使用此侦听器的标识符，该标识符由 返回google.maps.event.addListener并获取属性latLng以提取拖拽端的当前位置。一旦我们在拖动停止时获得 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>';
});
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.
如果您对我的回答有任何疑问，请告诉我。
回答by José David Bedoya
var lat = marker.getPosition().lat();
var lng = marker.getPosition().lng();
More information can be found at Google Maps API - LatLng
更多信息可以在Google Maps API - LatLng 中找到
回答by no.good.at.coding
You could just call getPosition()on the Marker- have you tried that?
你可以只调用getPosition()的Marker-你试过吗？
If you're on the deprecated, v2 of the JavaScript API, you can call getLatLng()on GMarker.
如果你是JavaScript API的弃用，V2，你可以叫getLatLng()上GMarker。
回答by Rolwin Crasta
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();
});
回答by Thiago Mata
// 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 );
回答by JB Nizet
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#Markerfor the description of events triggered by the marker. And see http://code.google.com/intl/fr/apis/maps/documentation/javascript/reference.html#MapsEventListenerfor 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。
回答by Manikandan Ece
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 10,
center: new google.maps.LatLng(13.103, 80.274),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var myMarker = new google.maps.Marker({
position: new google.maps.LatLng(18.103, 80.274),
draggable: true
});
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);
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
document.getElementById('current').innerHTML = '<p>Marker dropped: Current Lat: ' + position.coords.latitude + ' Current Lng: ' + position.coords.longitude + '</p>';
var myMarker = new google.maps.Marker({
position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
draggable: true
});
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);
}
getLocation();#map_canvas {
width: 980px;
height: 500px;
}
#current {
padding-top: 25px;
}<script src="http://maps.google.com/maps/api/js?sensor=false&.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<section>
<div id='map_canvas'></div>
<div id="current">
<p>Marker dropped: Current Lat:18.103 Current Lng:80.274</p>
</div>
</section>
</body>
</html>回答by Pr Shadoko
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();
