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 dragstart
pour suivre le début du glissement et dragend
pour 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 current
contenu 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.addListener
et récupère la propriété latLng
pour extraire la position actuelle du dragend. Une fois que nous obtenons ce Lat Lng lorsque le glisser s'arrête, nous afficherons dans 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 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.