Получение Lat/Lng из Google

Я сделал карту Google Maps с помощью перетаскиваемого маркера. Когда пользователь тащит маркер, мне нужно знать новую широту и долготу, но я не понимаю, как лучше всего это сделать.

Как получить новые координаты?

Ответ 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);

Сообщите мне, есть ли у вас какие-либо вопросы относительно моего ответа.

Ответ 2

Вы можете просто вызвать getPosition() в Marker - попробовали ли вы это?

Если вы устарели, v2 JavaScript API, вы можете вызвать getLatLng() в GMarker.

Ответ 3

var lat = marker.getPosition().lat();
var lng = marker.getPosition().lng();

Дополнительную информацию можно найти на API Карт Google - LatLng

Ответ 4

попробуйте это

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();
});

Ответ 5

// 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 );

Ответ 6

Вы должны добавить слушателя на маркер и прослушать событие перетаскивания или перетаскивания и спросить событие о его позиции, когда вы получите это событие.

См. 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 для методов, позволяющих добавлять прослушиватели событий.

Ответ 7

На этот вопрос много ответов, которые никогда не работали для меня (включая предложение getPosition(), которое не похоже на метод, доступный для объектов маркеров). Единственный метод, который работал у меня на картах V3 (просто):

var lat = marker.lat();
var long = marker.lng();