Я сделал карту Google Maps с помощью перетаскиваемого маркера. Когда пользователь тащит маркер, мне нужно знать новую широту и долготу, но я не понимаю, как лучше всего это сделать.
Как получить новые координаты?
Я сделал карту Google Maps с помощью перетаскиваемого маркера. Когда пользователь тащит маркер, мне нужно знать новую широту и долготу, но я не понимаю, как лучше всего это сделать.
Как получить новые координаты?
Вот 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);
Сообщите мне, есть ли у вас какие-либо вопросы относительно моего ответа.
Вы можете просто вызвать getPosition()
в Marker
- попробовали ли вы это?
Если вы устарели, v2 JavaScript API, вы можете вызвать getLatLng()
в GMarker
.
var lat = marker.getPosition().lat();
var lng = marker.getPosition().lng();
Дополнительную информацию можно найти на API Карт Google - LatLng
попробуйте это
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();
});
// 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 );
Вы должны добавить слушателя на маркер и прослушать событие перетаскивания или перетаскивания и спросить событие о его позиции, когда вы получите это событие.
См. http://code.google.com/intl/fr/apis/maps/documentation/javascript/reference.html#Marker для описания событий, инициированных маркером. И посмотрите http://code.google.com/intl/fr/apis/maps/documentation/javascript/reference.html#MapsEventListener для методов, позволяющих добавлять прослушиватели событий.
На этот вопрос много ответов, которые никогда не работали для меня (включая предложение getPosition(), которое не похоже на метод, доступный для объектов маркеров). Единственный метод, который работал у меня на картах V3 (просто):
var lat = marker.lat();
var long = marker.lng();