javascript - longitude - location new google maps latlng

Obtener Lat/Lng de Google marcador

Question

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

¿Cómo puedo recuperar las nuevas coordenadas?

Answer 1

Aquí está la demostración de JSFiddle . En Google Maps API V3, es bastante simple rastrear el lat y el lng de un marcador arrastrable. Comencemos con el siguiente HTML y CSS como nuestra 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 inicializando el mapa de google. Creamos un marcador que queremos arrastrar y establecemos su propiedad de arrastre en verdadero. Por supuesto, tenga en cuenta que debe adjuntarse a un evento de carga de su ventana para que se cargue, pero me saltearé el 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 dragstart para rastrear el inicio del arrastre y dragend a drack cuando el marcador deja de ser arrastrado, y la forma en que lo adjuntamos es usar google.maps.event.addListener . Lo que estamos haciendo aquí es configurar el contenido de la current div cuando se arrastra el marcador y luego establecer el lat y el lng 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 desencadena el evento. Entonces, lo que estamos haciendo aquí es básicamente usar el identificador para este oyente que es devuelto por google.maps.event.addListener y obtener la propiedad latLng para extraer la posición actual del dragend. Una vez que obtengamos ese Lat Lng cuando se detenga el arrastre, lo mostraremos dentro de su div current :

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.

Answer 2

Debe agregar un oyente en el marcador y escuchar el evento de arrastrar 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 le permiten agregar detectores de eventos.

Answer 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 los mapas V3 es (simplemente):

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

Answer 4

Podrías simplemente llamar a getPosition() en el Marker , ¿has probado eso?

Si está en desuso, v2 de la API de JavaScript, puede llamar a getLatLng() en GMarker .

Answer 5

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

Answer 6

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

Answer 7

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

Se puede encontrar más información en Google Maps API - LatLng