Lat / Lng von Google Marker abrufen

89

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?

Genadinik
quelle

Antworten:

132

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.

KJYe.Name 葉家仁
quelle
3
Das ist ausgezeichnet! Ich habe eine Karte mit einem automatisch vervollständigten Adresseneingabefeld sowie einer ziehbaren Markierung. Ich muss auch lat lange Koordinaten anzeigen, wenn jemand das Eingabefeld verwendet. Gibt es eine einfache Lösung dafür?
Kirk Ross
38
var lat = marker.getPosition().lat();
var lng = marker.getPosition().lng();

Weitere Informationen finden Sie unter Google Maps API - LatLng

José David Bedoya
quelle
31

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 .

no.good.at.coding
quelle
Ich denke, meine Verwirrung war, wann ich getPosition () aufrufen sollte - muss ich es dem Konstruktor hinzufügen, damit er nach den Koordinaten fragen kann, wenn der Marker verschoben wird?
Genadinik
@Genadinik Das Beispiel, auf das ich in meiner Bearbeitung verwiesen habe, könnte hilfreich sein. Es wird gezeigt, wie Sie einen Listener für Drag-Ereignisse anhängen, in dem Sie den Marker nach seiner Position abfragen und verwenden können, wie Sie möchten.
no.good.at.coding
Ah cool, und wenn ich die Koordinaten in der Sitzung oder in der Datenbank speichern möchte, sollte ich dies über einen AJAX-Aufruf tun? Oder gibt es einen einfacheren Weg?
Genadinik
Ich kann mir nichts Einfacheres vorstellen als einen schnellen Ajax-Beitrag mit der Markierungs-ID und den aktuellen Koordinaten :) Sie können jedoch in Betracht ziehen, Aktualisierungen zu stapeln oder zumindest einige Sekunden zu warten, bis der Drag abgeschlossen ist und der Benutzer dies nicht tut Beginnen Sie mit weiteren Zügen, damit Sie den Server nicht mit Anforderungen überschwemmen, während Markierungen gezogen werden. Warten Sie, bis die Positionen sozusagen stabil sind. Dies hängt natürlich davon ab, wie weit Sie es sich leisten können, Ihren serverseitigen Status im Vergleich zu dem, was der Client sieht, zu haben.
no.good.at.coding
1
getPosition()gibt ein Objekt, so spezifisch erhalten Breite / Länge, Sie rufen müssen werden lat()und lng()von dem jeweils.
Jeff Puckett
20

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();
});
Rolwin Crasta
quelle
8
// 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 );
Thiago Mata
quelle
2

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.

JB Nizet
quelle
2

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>

Manikandan Ece
quelle
1
Während dieser Code die Frage beantworten kann, verbessert die Bereitstellung von Informationen darüber, wie und warum das Problem gelöst wird, seinen langfristigen Wert.
L_J
-3

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();
Pr Shadoko
quelle
1
Ich denke du meinst marker.position.lat()undmarker.position.lng()
Jeff Puckett
Oder Sie müssen marker.getPosition().lat()undmarker.getPosition().lng()
Sergio Reis
Sie können "long" nicht als Variable verwenden
Dinith