Я сделал карту Google Maps с перетаскиваемым маркером. Когда пользователь перетаскивает маркер, мне нужно знать новую широту и долготу, но я не понимаю, как лучше всего это сделать.
Как мне получить новые координаты?
источник
Я сделал карту Google Maps с перетаскиваемым маркером. Когда пользователь перетаскивает маркер, мне нужно знать новую широту и долготу, но я не понимаю, как лучше всего это сделать.
Как мне получить новые координаты?
Вот демонстрация JSFiddle . В Google Maps API V3 довольно просто отслеживать широту и долготу перетаскиваемого маркера. Начнем со следующих 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
. Что мы здесь делаем, так это устанавливаем current
содержимое div , когда маркер перетаскивается, а затем устанавливаем широту и долготу маркера, когда перетаскивание останавливается. Событие мыши Google имеет имя свойства "latlng", которое возвращает объект "google.maps.LatLng" при срабатывании события. Итак, то, что мы здесь делаем, в основном использует идентификатор для этого слушателя, который возвращается google.maps.event.addListener
объектом и получает свойство latLng
для извлечения текущей позиции dragend. Как только мы получим эту 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);
Дайте мне знать, если у вас возникнут вопросы относительно моего ответа.
var lat = marker.getPosition().lat(); var lng = marker.getPosition().lng();
Дополнительную информацию можно найти в API Карт Google - LatLng
источник
marker
перед вызовом методов? например, я смотрю на developers.google.com/maps/documentation/javascript/examples/… и после того, как поиск был выполнен и появился маркер, как мне узнать широту / долготу этого маркера?Вы можете просто позвонить
getPosition()
наMarker
- вы пробовали это?Если вы находитесь на устаревшей, v2 из API JavaScript, вы можете позвонить
getLatLng()
наGMarker
.источник
getPosition()
возвращает объект, поэтому, чтобы конкретно получить широту / долготу, вам нужно будет вызватьlat()
иlng()
соответственно от этого.попробуй это
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 о методах, позволяющих добавлять прослушиватели событий.
источник
var map = new google.maps.Map(document.getElementById('map_canvas'), { zoom: 10, center: new google.maps.LatLng(13.103, 80.274), mapTypeId: google.maps.MapTypeId.ROADMAP }); var myMarker = new google.maps.Marker({ position: new google.maps.LatLng(18.103, 80.274), draggable: true }); 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); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { x.innerHTML = "Geolocation is not supported by this browser."; } } function showPosition(position) { document.getElementById('current').innerHTML = '<p>Marker dropped: Current Lat: ' + position.coords.latitude + ' Current Lng: ' + position.coords.longitude + '</p>'; var myMarker = new google.maps.Marker({ position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude), draggable: true }); 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); } getLocation();
#map_canvas { width: 980px; height: 500px; } #current { padding-top: 25px; }
<script src="http://maps.google.com/maps/api/js?sensor=false&.js"></script> <!DOCTYPE html> <html lang="en"> <head> </head> <body> <section> <div id='map_canvas'></div> <div id="current"> <p>Marker dropped: Current Lat:18.103 Current Lng:80.274</p> </div> </section> </body> </html>
источник
На этот вопрос есть много ответов, которые у меня никогда не работали (включая предложение getPosition (), который, похоже, не является методом, доступным для объектов-маркеров). Единственный метод, который работал у меня в картах V3 (просто):
var lat = marker.lat(); var long = marker.lng();
источник
marker.position.lat()
иmarker.position.lng()
marker.getPosition().lat()
иmarker.getPosition().lng()