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 dragend
zu 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.addListener
und 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 current
div 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.
Weitere Informationen finden Sie unter Google Maps API - LatLng
quelle
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
.quelle
getPosition()
gibt ein Objekt, so spezifisch erhalten Breite / Länge, Sie rufen müssen werdenlat()
undlng()
von dem jeweils.Versuche dies
quelle
quelle
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.
quelle
quelle
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):
quelle
marker.position.lat()
undmarker.position.lng()
marker.getPosition().lat()
undmarker.getPosition().lng()