Obtenir Lat / Lng à partir du marqueur Google


89

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?

Réponses:


132

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.


3
C'est excellent! J'ai une carte avec un champ de saisie d'adresse auto-complet ainsi qu'un marqueur déplaçable. J'ai besoin d'afficher également les coordonnées longues lat si quelqu'un utilise le champ de saisie. Y a-t-il une solution simple à cela?
Kirk Ross


31

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 .


Je pense que ma confusion est de savoir quand appeler le getPosition () - est-ce quelque chose que je dois ajouter au constructeur pour qu'il sache demander les coordonnées lorsque le marqueur est déplacé?
Genadinik

@Genadinik L'exemple auquel j'ai fait un lien dans ma modification pourrait être utile; il montre comment attacher un écouteur pour les événements de glissement où vous pouvez interroger le marqueur pour sa position et l'utiliser comme vous le souhaitez.
no.good.at.coding

Ah cool, et si je veux stocker les coordonnées dans la session ou dans la base de données, dois-je le faire via un appel AJAX? Ou y a-t-il un moyen plus simple?
Genadinik

Je ne peux penser à rien de plus simple qu'un article Ajax rapide avec l'identifiant du marqueur et ses coordonnées actuelles :) Mais vous pouvez envisager de mettre à jour par lots ou au moins attendre quelques secondes jusqu'à ce que le glissement soit terminé et voir que l'utilisateur ne le fait pas ne commencez plus à faire glisser pour ne pas inonder le serveur de requêtes pendant que les marqueurs sont en train d'être déplacés - attendez que les positions soient stables, pour ainsi dire. Cela dépend bien sûr de la distance à laquelle vous pouvez vous permettre d'avoir l'état côté serveur par rapport à ce que voit le client.
no.good.at.coding

1
getPosition()renvoie un objet, donc pour obtenir spécifiquement la latitude / longitude, vous devrez appeler lat()et lng()respectivement à partir de cela.
Jeff Puckett

20

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

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

2

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.


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>


1
Bien que ce code puisse répondre à la question, fournir des informations sur comment et pourquoi il résout le problème améliore sa valeur à long terme.
L_J

-3

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

1
Je pense que vous voulez dire marker.position.lat()etmarker.position.lng()
Jeff Puckett

Ou vous devez utiliser marker.getPosition().lat()etmarker.getPosition().lng()
Sergio Reis

vous ne pouvez pas utiliser "long" comme variable
Dinith le
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.