Obteniendo Lat / Lng del marcador de Google


89

Hice un mapa de Google Maps con un marcador que se puede arrastrar. Cuando el usuario arrastra el marcador, necesito conocer la nueva latitud y longitud, pero no entiendo cuál es el mejor enfoque para hacerlo.

¿Cómo puedo recuperar las nuevas coordenadas?

Respuestas:


132

Aquí está la demostración de JSFiddle . En Google Maps API V3, es bastante sencillo rastrear la latitud y la longitud de un marcador que se puede arrastrar. Comencemos con el siguiente HTML y CSS como base.

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

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

#current{
     padding-top: 25px;
}

Aquí está nuestro JavaScript inicial que inicializa el mapa de Google. Creamos un marcador que queremos arrastrar y establecemos su propiedad arrastrable como verdadera. Por supuesto, tenga en cuenta que debe adjuntarse a un evento de carga de su ventana para que se cargue, pero saltaré al código:

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

Aquí adjuntamos dos eventos dragstartpara rastrear el inicio del arrastre y dragendpara drack cuando el marcador deja de ser arrastrado, y la forma en que lo adjuntamos es para usar google.maps.event.addListener. Lo que estamos haciendo aquí es establecer el currentcontenido del div cuando se arrastra el marcador y luego establecer la latitud y la longitud del marcador cuando se detiene el arrastre. El evento del mouse de Google tiene un nombre de propiedad 'latlng' que devuelve el objeto 'google.maps.LatLng' cuando se activa el evento. Entonces, lo que estamos haciendo aquí es básicamente usar el identificador para este oyente que es devuelto por google.maps.event.addListenery obtiene la propiedad latLngpara extraer la posición actual del dragend. Una vez que obtengamos Lat Lng cuando el arrastre se detenga, mostraremos dentro de su 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>';
});

Por último, centraremos nuestro marcador y lo mostraremos en el mapa:

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

Avíseme si tiene alguna pregunta sobre mi respuesta.


3
¡Esto es excelente! Tengo un mapa con un campo de entrada de dirección de autocompletar, así como un marcador que se puede arrastrar. También necesito mostrar coordenadas lat long si alguien usa el campo de entrada. ¿Existe una solución sencilla para esto?
Kirk Ross


31

Podrías simplemente llamar getPosition()alMarker - ¿lo has intentado?

Si estás en la versión 2 obsoleta de la API de JavaScript, puedes recurrir getLatLng()aGMarker .


Creo que mi confusión fue cuándo llamar a getPosition (): ¿es algo que tengo que agregar al constructor para que sepa pedir las coordenadas cuando se mueve el marcador?
Genadinik

@Genadinik El ejemplo al que me vinculé en mi edición podría ser de ayuda; muestra cómo adjuntar un oyente para eventos de arrastre donde puede consultar el marcador para su posición y usarlo como desee.
no.good.at.coding

Ah, genial, y si quiero almacenar las coordenadas en la sesión o en la base de datos, ¿debería hacerlo a través de una llamada AJAX? ¿O hay una forma más sencilla?
Genadinik

No puedo pensar en nada más simple que una publicación rápida de Ajax con la identificación del marcador y sus coordenadas actuales :) Pero podría considerar las actualizaciones por lotes o al menos esperar unos segundos hasta que se complete el arrastre y ver que el usuario no lo hace. comience más arrastres para no inundar el servidor con solicitudes mientras los marcadores están en proceso de ser arrastrados - espere hasta que las posiciones sean estables, por así decirlo. Por supuesto, esto depende de qué tan atrasado pueda permitirse tener su estado del lado del servidor en comparación con lo que ve el cliente.
no.good.at.coding

1
getPosition() devuelve un objeto, por lo que para obtener específicamente la latitud / longitud, tendrá que llamar lat() y lng()respectivamente desde eso.
Jeff Puckett

20

prueba esto

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

Debe agregar un oyente en el marcador y escuchar el evento drag o dragend, y preguntarle al evento su posición cuando reciba este evento.

Consulte http://code.google.com/intl/fr/apis/maps/documentation/javascript/reference.html#Marker para obtener una descripción de los eventos activados por el marcador. Y consulte http://code.google.com/intl/fr/apis/maps/documentation/javascript/reference.html#MapsEventListener para conocer los métodos que permiten agregar detectores de eventos.


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
Si bien este código puede responder la pregunta, brindar información sobre cómo y por qué resuelve el problema mejora su valor a largo plazo.
L_J

-3

Hay muchas respuestas a esta pregunta, que nunca funcionó para mí (incluida la sugerencia de getPosition () que no parece ser un método disponible para los objetos marcadores). El único método que funcionó para mí en mapas V3 es (simplemente):

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

1
Creo que te refieres a marker.position.lat()ymarker.position.lng()
Jeff Puckett

O necesita usar marker.getPosition().lat()ymarker.getPosition().lng()
Sergio Reis

no puedes usar "long" como variable
Dinith
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.