Ottenere Lat / Lng dall'indicatore di Google

Ho creato una mappa di Google Maps con un indicatore trascinabile. Quando l'utente trascina l'indicatore, ho bisogno di conoscere la nuova latitudine e longitudine, ma non capisco quale sia l'approccio migliore per farlo.

Come posso recuperare le nuove coordinate?

Ecco la demo di JSFiddle . Nell'API di Google Maps V3 è piuttosto semplice tenere traccia della latitudine e dell'estensione di un marker trascinabile. Cominciamo con i seguenti HTML e CSS come base.

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

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

#current{
     padding-top: 25px;
}

Ecco il nostro JavaScript iniziale che inizializza la mappa di Google. Creiamo un marker che vogliamo trascinare e impostiamo la sua proprietà trascinabile su true. Ovviamente tieni presente che dovrebbe essere allegato a un evento di onload della tua finestra affinché possa essere caricato, ma salterò al codice:

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

Qui alleghiamo due eventi dragstartper tracciare l'inizio del trascinamento e dragendper trascinare quando il marcatore smette di essere trascinato, e il modo in cui lo colleghiamo è quello di usarlo google.maps.event.addListener. Quello che stiamo facendo qui è impostare il currentcontenuto del div quando il marker viene trascinato e quindi impostare lat e lng del marker quando il trascinamento si interrompe. L'evento del mouse di Google ha un nome di proprietà "latlng" che restituisce l'oggetto "google.maps.LatLng" quando l'evento si attiva. Quindi, ciò che stiamo facendo qui è fondamentalmente utilizzare l'identificatore per questo listener che viene restituito da google.maps.event.addListenere ottenere la proprietà latLngper estrarre la posizione corrente del dragend. Una volta ottenuto quel Lat Lng quando il trascinamento si interrompe, verrà visualizzato nel tuo 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>';
});

Infine, centreremo il nostro indicatore e lo visualizzeremo sulla mappa:

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

Fammi sapere se hai domande sulla mia risposta.

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

Ulteriori informazioni possono essere trovate su Google Maps API - LatLng

Potresti semplicemente chiamare getPosition()ilMarker - hai provato?

Se siete sulla deprecato, v2 delle API JavaScript, è possibile chiamare getLatLng()suGMarker .

prova questo

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

È necessario aggiungere un ascoltatore sul marcatore e ascoltare l'evento di trascinamento o trascinamento e chiedere all'evento la sua posizione quando si riceve questo evento.

Vedi http://code.google.com/intl/fr/apis/maps/documentation/javascript/reference.html#Marker per la descrizione degli eventi attivati ​​dal marcatore. E vedi http://code.google.com/intl/fr/apis/maps/documentation/javascript/reference.html#MapsEventListener per i metodi che consentono di aggiungere listener di eventi.

Ci sono molte risposte a questa domanda, che non ha mai funzionato per me (incluso il suggerimento di getPosition () che non sembra essere un metodo disponibile per gli oggetti marker). L'unico metodo che ha funzionato per me in Maps V3 è (semplicemente):

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