Lat / Lng von Google Marker abrufen

Ich habe eine Google Maps-Karte mit einer ziehbaren Markierung erstellt. Wenn der Benutzer den Marker zieht, muss ich den neuen Breiten- und Längengrad kennen, aber ich verstehe nicht, was der beste Ansatz dafür ist.

Wie kann ich die neuen Koordinaten abrufen?

Hier ist die JSFiddle-Demo . In Google Maps API V3 ist es ziemlich einfach, die Breite und Länge eines ziehbaren Markers zu verfolgen. Beginnen wir mit dem folgenden HTML und CSS als Basis.

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

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

#current{
     padding-top: 25px;
}

Hier ist unser erstes JavaScript, das die Google Map initialisiert. Wir erstellen einen Marker, den wir ziehen möchten, und setzen seine ziehbare Eigenschaft auf true. Denken Sie natürlich daran, dass es an ein Onload-Ereignis Ihres Fensters angehängt werden sollte, damit es geladen werden kann, aber ich werde zum Code springen:

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

Hier fügen wir zwei Ereignisse hinzu dragstart, um den Beginn des Ziehens zu verfolgen und dragendzu zeichnen, wenn der Marker nicht mehr gezogen wird, und die Art und Weise, wie wir ihn anhängen, ist zu verwenden google.maps.event.addListener. Was wir hier tun, ist das Festlegen des Div current-Inhalts, wenn der Marker gezogen wird, und dann das Lat und Lng des Markers, wenn das Ziehen stoppt. Das Google-Mausereignis hat den Eigenschaftsnamen "latlng", der beim Auslösen des Ereignisses das Objekt "google.maps.LatLng" zurückgibt. Wir verwenden hier also im Wesentlichen den Bezeichner für diesen Listener, der von der zurückgegeben wird, google.maps.event.addListenerund erhalten die Eigenschaft latLng, die aktuelle Position des Dragends zu extrahieren. Sobald wir das Lat Lng erhalten, wenn das Ziehen stoppt, werden wir in Ihrem currentdiv anzeigen :

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

Zuletzt zentrieren wir unseren Marker und zeigen ihn auf der Karte an:

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

Lassen Sie mich wissen, wenn Sie Fragen zu meiner Antwort haben.

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

Weitere Informationen finden Sie unter Google Maps API - LatLng

Sie könnten einfach anrufen getPosition()auf dieMarker - Sie haben das versucht?

Wenn Sie auf dem veralteten, v2 des JavaScript - API sind, können Sie rufen Sie getLatLng()anGMarker .

Versuche dies

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

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

Sie sollten dem Marker einen Listener hinzufügen, auf das Drag & Drag-Ereignis warten und das Ereignis nach seiner Position fragen, wenn Sie dieses Ereignis erhalten.

Unter http://code.google.com/intl/fr/apis/maps/documentation/javascript/reference.html#Marker finden Sie eine Beschreibung der vom Marker ausgelösten Ereignisse. Unter http://code.google.com/intl/fr/apis/maps/documentation/javascript/reference.html#MapsEventListener finden Sie Methoden zum Hinzufügen von Ereignis-Listenern.

Es gibt viele Antworten auf diese Frage, die für mich nie funktioniert haben (einschließlich des Vorschlags von getPosition (), die keine Methode für Markierungsobjekte zu sein scheint). Die einzige Methode, die in Maps V3 für mich funktioniert hat, ist (einfach):

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