Ответ 1
Вот JSFiddle Demo. В Google Maps API V3 довольно просто отслеживать lat и lng перетаскиваемого маркера. Начнем со следующего HTML и CSS в качестве нашей базы.
<div id='map_canvas'></div>
<div id="current">Nothing yet...</div>
#map_canvas{
width: 400px;
height: 300px;
}
#current{
padding-top: 25px;
}
Вот наш начальный JavaScript, инициализирующий карту google. Мы создаем маркер, который мы хотим перетащить, и установите для него свойство draggable значение true. Конечно, имейте в виду, что он должен быть привязан к событию onload вашего окна для его загрузки, но я пропущу код:
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
});
Здесь мы прикрепляем два события dragstart
для отслеживания начала перетаскивания и dragend
для разговора, когда маркер перестает перетаскиваться, и способ, которым мы прикрепляем его, заключается в использовании google.maps.event.addListener
. Мы здесь делаем настройку содержимого div current
, когда маркер получает перетаскивание, а затем устанавливаем маркер lat и lng, когда перетаскивание останавливается. Событие Google mouse имеет имя свойства latlng, которое возвращает объект google.maps.LatLng при срабатывании события. Итак, то, что мы делаем здесь, в основном использует идентификатор этого слушателя, который возвращается google.maps.event.addListener
и получает свойство latLng
для извлечения текущей позиции перетаскивания. Как только мы получим Lat Lng, когда мы остановимся, мы отобразим в вашем 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>';
});
Наконец, мы сосредоточим наш маркер и отобразим его на карте:
map.setCenter(myMarker.position);
myMarker.setMap(map);
Сообщите мне, есть ли у вас какие-либо вопросы относительно моего ответа.