web-dev-qa-db-fra.com

Obtenir Lat / Lng à partir de Google

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

Comment puis-je récupérer les nouvelles coordonnées?

javascriptgoogle-mapsgoogle-maps-markers
87
Genadinik

Voici le démo JSFiddle . Dans Google Maps API V3, il est assez simple de suivre les mouvements latéraux et lng d’un marqueur déplaçable. Commençons par le HTML et 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 code JavaScript initial initialisant la carte Google. Nous créons un marqueur que nous voulons faire glisser et définissons sa propriété draggable sur true. Bien sûr, gardez à l'esprit qu'il devrait être attaché à un événement onload de votre fenêtre pour pouvoir être 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 dragstart pour suivre le début du glissement et dragend à drack lorsque le marqueur cesse de glisser, et la façon dont nous l’attachons consiste à utiliser google.maps.event.addListener. Ce que nous faisons ici est de définir le contenu de la div current lorsque le marqueur est déplacé, puis de définir les valeurs lat et lng 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 retourné par le google.maps.event.addListener et obtenez la propriété latLng pour extraire la position actuelle du dragend. Une fois que nous aurons ce Lat Lng quand le glissement s'arrêtera, nous afficherons votre current div:

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 allons centrer notre marqueur et l’afficher sur la carte:

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

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

122
KJYe.Name

Vous pouvez simplement appeler getPosition() sur le Marker - avez-vous essayé?

Si vous êtes sur la version obsolète, v2 de l'API JavaScript, vous pouvez appeler getLatLng() sur GMarker .

28
no.good.at.coding
var lat = marker.getPosition().lat();
var lng = marker.getPosition().lng();

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

26
José David Bedoya

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();
});
18
Rolwin C
// 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 );
6
Thiago Mata
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
Manikandan Ece

Vous devez ajouter un écouteur sur le marqueur, écouter l'événement drag ou dragend et lui demander sa position à la réception de cet événement.

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

1
JB Nizet