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 dragstart
para rastrear el inicio del arrastre y dragend
para 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 current
contenido 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.addListener
y obtiene la propiedad latLng
para extraer la posición actual del dragend. Una vez que obtengamos Lat Lng cuando el arrastre se detenga, mostraremos dentro de su 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>';
});
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.