Obtenir Lat / Lng à partir du marqueur Google

J'ai créé une carte Google Maps avec un marqueur déplaçable. Lorsque l'utilisateur fait glisser le marqueur, j'ai besoin de connaître la nouvelle latitude et la longitude, mais je ne comprends pas quelle est la meilleure approche pour le faire.

Comment récupérer les nouvelles coordonnées?

Voici la démo de JSFiddle . Dans l'API Google Maps V3, il est assez simple de suivre la latitude et la longueur d'un marqueur déplaçable. Commençons par le HTML et le CSS suivants comme base.

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

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

#current{
     padding-top: 25px;
}

Voici notre premier JavaScript initialisant la carte google. Nous créons un marqueur que nous voulons faire glisser et définissons sa propriété déplaçable sur true. Bien sûr, gardez à l'esprit qu'il doit être attaché à un événement onload de votre fenêtre pour qu'il soit chargé, mais je vais passer au code:

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

Ici, nous attachons deux événements dragstartpour suivre le début du glissement et dragendpour drack lorsque le marqueur cesse d'être déplacé, et la façon dont nous l'attachons est d'utiliser google.maps.event.addListener. Ce que nous faisons ici, c'est définir le currentcontenu de la div lorsque le marqueur est déplacé, puis définir la lat et la longueur du marqueur lorsque le glissement s'arrête. L'événement de souris Google a un nom de propriété «latlng» qui renvoie l'objet «google.maps.LatLng» lorsque l'événement se déclenche. Donc, ce que nous faisons ici consiste essentiellement à utiliser l'identifiant de cet écouteur qui est renvoyé par le google.maps.event.addListeneret récupère la propriété latLngpour extraire la position actuelle du dragend. Une fois que nous obtenons ce Lat Lng lorsque le glisser s'arrête, nous afficherons dans votre 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>';
});

Enfin, nous centrerons notre marqueur et l'afficherons sur la carte:

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

Faites-moi savoir si vous avez des questions concernant ma réponse.

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

Pour plus d'informations, consultez l' API Google Maps - LatLng

Vous pouvez simplement appeler getPosition()leMarker - avez-vous essayé cela?

Si vous êtes sur la dépréciée, v2 de l'API JavaScript, vous pouvez appeler getLatLng()surGMarker .

essaye ça

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

Vous devez ajouter un écouteur sur le marqueur et écouter l'événement glisser ou glisser, et demander à l'événement sa position lorsque vous recevez cet événement.

Voir http://code.google.com/intl/fr/apis/maps/documentation/javascript/reference.html#Marker pour la description des événements déclenchés par le marqueur. Et voir http://code.google.com/intl/fr/apis/maps/documentation/javascript/reference.html#MapsEventListener pour les méthodes permettant d'ajouter des écouteurs d'événements.

Il y a beaucoup de réponses à cette question, qui n'a jamais fonctionné pour moi (y compris en suggérant getPosition () qui ne semble pas être une méthode disponible pour les objets marqueurs). La seule méthode qui a fonctionné pour moi dans les cartes V3 est (simplement):

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