Pobieranie Lat / Lng z markera Google

90

Zrobiłem mapę Google Maps z przeciąganym znacznikiem. Kiedy użytkownik przeciąga znacznik, muszę znać nową szerokość i długość geograficzną, ale nie rozumiem, jakie jest najlepsze podejście do zrobienia tego.

Jak mogę odzyskać nowe współrzędne?

Genadinik
źródło

Odpowiedzi:

133

Oto demo JSFiddle . W Google Maps API V3 bardzo łatwo jest śledzić szerokość i długość przeciąganego znacznika. Zacznijmy od następującego kodu HTML i CSS jako podstawy.

<div id='map_canvas'></div>
<div id="current">Nothing yet...</div>

#map_canvas{
    width: 400px;
    height: 300px;
}

#current{
     padding-top: 25px;
}

Oto nasz początkowy JavaScript inicjujący mapę google. Tworzymy znacznik, który chcemy przeciągnąć i ustawiamy jego właściwość draggable na true. Oczywiście pamiętaj, że powinien być dołączony do zdarzenia onload twojego okna, aby zostało załadowane, ale przejdę do kodu:

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

Tutaj dołączamy dwa zdarzenia, dragstartaby śledzić początek przeciągania i dragendprzesuwać, kiedy marker przestanie być przeciągany, a sposób, w jaki go dołączamy, jest używany google.maps.event.addListener. To, co tutaj robimy, to ustawienie currentzawartości elementu div , gdy znacznik jest przeciągany, a następnie ustawienie szerokości i lng znacznika, gdy przeciąganie się zatrzyma. Zdarzenie myszy Google ma nazwę właściwości „latlng”, która zwraca obiekt „google.maps.LatLng” po wyzwoleniu zdarzenia. Więc to, co tutaj robimy, polega w zasadzie na użyciu identyfikatora tego nasłuchiwania, który jest zwracany przez właściwość google.maps.event.addListeneri pobiera właściwość w latLngcelu wyodrębnienia bieżącej pozycji dragend. Gdy otrzymamy ten Lat Lng, gdy przeciąganie się zatrzyma, wyświetlimy w Twoim 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>';
});

Na koniec wyśrodkujemy nasz znacznik i wyświetlimy go na mapie:

map.setCenter(myMarker.position);
myMarker.setMap(map);

Daj mi znać, jeśli masz jakieś pytania dotyczące mojej odpowiedzi.

KJYe.Name 葉家仁
źródło
3
To jest doskonałe! Mam mapę z autouzupełnianiem pola wprowadzania adresu, a także znacznikiem do przeciągania. Muszę również wyświetlić współrzędne szerokości geograficznej długiej, jeśli ktoś używa pola wprowadzania. Czy jest na to proste rozwiązanie?
Kirk Ross
40
var lat = marker.getPosition().lat();
var lng = marker.getPosition().lng();

Więcej informacji można znaleźć w Google Maps API - LatLng

José David Bedoya
źródło
jak utworzyć instancję markerprzed wywołaniem na niej metod? na przykład patrzę na developers.google.com/maps/documentation/javascript/examples/ ... i po zakończeniu wyszukiwania i pojawieniu się znacznika, w jaki sposób mogę uzyskać szerokość / długość tego znacznika?
user1063287
31

Możesz po prostu zadzwonić getPosition()doMarker - próbowałeś tego?

Jeśli jesteś na nieaktualnych, V2 API JavaScriptu, możesz zadzwonić getLatLng()naGMarker .

no.good.at.coding
źródło
Myślę, że moje zamieszanie polegało na wywołaniu metody getPosition () - czy jest to coś, co muszę dodać do konstruktora, aby wiedział, że pyta o współrzędne, gdy znacznik jest przesuwany?
Genadinik
@Genadinik Przykład, do którego umieściłem link w mojej edycji, może pomóc; pokazuje, jak dołączyć detektor dla zdarzeń przeciągania, w którym możesz zapytać znacznik o jego pozycję i używać go w dowolny sposób.
no. Good.at.coding
Ach fajnie, a jeśli chcę przechowywać współrzędne w sesji lub w bazie danych, czy powinienem to zrobić za pośrednictwem połączenia AJAX? Czy jest prostszy sposób?
Genadinik
Nie przychodzi mi do głowy nic prostszego niż szybki post w Ajaxie z identyfikatorem znacznika i jego aktualnymi współrzędnymi :) Ale możesz rozważyć zbiorcze aktualizacje lub przynajmniej odczekać kilka sekund, aż po zakończeniu przeciągania i zobaczenie, że użytkownik nie rozpocznij dalsze przeciąganie, aby nie zasypywać serwera żądaniami, gdy znaczniki są w trakcie przeciągania - poczekaj, aż pozycje będą stabilne, że tak powiem. To oczywiście zależy od tego, jak daleko w tyle możesz pozwolić sobie na stan po stronie serwera w porównaniu z tym, co widzi klient.
no. Good.at.coding
1
getPosition()zwraca obiekt, więc aby dokładnie uzyskać szerokość / długość geograficzną, będziesz musiał wywołać lat()i lng()odpowiednio z tego.
Jeff Puckett,
20

Spróbuj tego

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();
});
Rolwin Crasta
źródło
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 );
Thiago Mata
źródło
2

Powinieneś dodać detektor do znacznika i nasłuchiwać zdarzenia drag lub dragend oraz pytać zdarzenie o jego pozycję, kiedy otrzymasz to zdarzenie.

Zobacz http://code.google.com/intl/fr/apis/maps/documentation/javascript/reference.html#Marker, aby zapoznać się z opisem zdarzeń wywołanych przez znacznik. Zobacz też http://code.google.com/intl/fr/apis/maps/documentation/javascript/reference.html#MapsEventListener , aby poznać metody umożliwiające dodawanie detektorów zdarzeń.

JB Nizet
źródło
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>

Manikandan Ece
źródło
1
Chociaż ten kod może odpowiedzieć na pytanie, dostarczenie informacji o tym, jak i dlaczego rozwiązuje problem, poprawia jego długoterminową wartość.
L_J,
-3

Jest wiele odpowiedzi na to pytanie, które nigdy dla mnie nie działały (w tym sugerowanie metody getPosition (), która nie wydaje się być metodą dostępną dla obiektów markerowych). Jedyna metoda, która działała dla mnie w mapach V3 to (po prostu):

var lat = marker.lat();
var long = marker.lng();
Pr Shadoko
źródło
1
Myślę, że masz na myśli marker.position.lat()imarker.position.lng()
Jeff Puckett
Lub musisz użyć marker.getPosition().lat()imarker.getPosition().lng()
Sergio Reis
nie możesz użyć „long” jako zmiennej
Dinith