Получение широты / долготы с помощью маркера Google


90

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

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

Ответы:


133

Вот демонстрация 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, когда перетаскивание прекратится, мы отобразим в вашем currentdiv:

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

Дайте мне знать, если у вас возникнут вопросы относительно моего ответа.


3
Это отлично! У меня есть карта с полем ввода адреса автозаполнения, а также перетаскиваемым маркером. Мне также нужно отображать долгие координаты широты, если кто-то использует поле ввода. Есть ли простое решение этой проблемы?
Кирк Росс

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

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


как создать его экземпляр markerперед вызовом методов? например, я смотрю на developers.google.com/maps/documentation/javascript/examples/… и после того, как поиск был выполнен и появился маркер, как мне узнать широту / долготу этого маркера?
user1063287

31

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

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


Я думаю, что моя путаница заключалась в том, когда вызывать getPosition () - это что-то, что я должен добавить в конструктор, чтобы он знал, что нужно запрашивать координаты при перемещении маркера?
Genadinik

@Genadinik Пример, на который я ссылался в своем редактировании, может помочь; в нем показано, как прикрепить прослушиватель для событий перетаскивания, где вы можете запросить маркер для его положения и использовать его, как хотите.
no.good.at.coding

Круто, и если я хочу сохранить координаты в сеансе или в базе данных, должен ли я сделать это через вызов AJAX? Или есть способ попроще?
Genadinik

Я не могу придумать ничего проще, чем быстрый пост Ajax с идентификатором маркера и его текущими координатами :) Но вы можете подумать о пакетных обновлениях или, по крайней мере, подождать несколько секунд, пока перетаскивание не будет завершено, и увидеть, что пользователь не начните любые перетаскивания, чтобы вы не завалили сервер запросами, пока маркеры перетаскиваются - подождите, пока позиции не станут стабильными, так сказать. Это, конечно, зависит от того, насколько далеко вы можете позволить себе иметь состояние на стороне сервера по сравнению с тем, что видит клиент.
no.good.at.coding

1
getPosition()возвращает объект, поэтому, чтобы конкретно получить широту / долготу, вам нужно будет вызвать lat()и lng()соответственно от этого.
Джефф Пакетт,

20

попробуй это

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

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

2

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

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


2

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>


1
Хотя этот код может дать ответ на вопрос, предоставление информации о том, как и почему он решает проблему, улучшает его долгосрочную ценность.
L_J

-3

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

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

1
Я думаю , что вы имеете в виду marker.position.lat()иmarker.position.lng()
Джефф Puckett

Или вам нужно использовать marker.getPosition().lat()иmarker.getPosition().lng()
Серхио Рейс

нельзя использовать long в качестве переменной
Динит,
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.