從Google標記中獲取緯度/經度

Question

我製作了帶有可拖動標記的Google地圖地圖。當用戶拖動標記時，我需要知道新的經緯度，但我不明白什麼是最好的方法來做到這一點。

如何檢索新座標？

Answer 1

這裏是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初始化谷歌地圖。我們創建一個我們想要拖動的標記，並將其可拖動屬性設置爲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。我們在這裏做的是在標記被拖動時設置div current的內容，然後在拖動停止時設置標記的lat和lng。 Google鼠標事件的屬性名稱爲'latlng'，當事件觸發時返回'google.maps.LatLng'對象。因此，我們在這裏所做的基本上是使用此偵聽器的標識符，該標識符由google.maps.event.addListener返回並獲取屬性latLng以提取dragend的當前位置。一旦我們得到的緯度LNG拖動停止，我們將您的current格中顯示時：

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() on the Marker - 你試過嗎？

如果您使用的是JavaScript API的棄用版，您可以致電getLatLng() on GMarker。

Answer 3

您應該在標記上添加偵聽器並偵聽拖動或dragend事件，並在收到此事件時詢問事件的位置。

請參閱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。

Answer 4

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

Answer 5

試試這個

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 6

有很多回答這個問題，這從來不是我的（包括建議爲getPosition（合作的），它似乎並不可用於標記對象的方法）。只有在地圖V3爲我工作的方法（簡單）：

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

Answer 7

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

更多信息可以在Google Maps API - LatLng