Getting Lat / Lng from Google marker

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

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

Author: MAXE, 2011-03-13
Source

8 answers

Oto Jsfiddle Demo. W Google Maps API V3 śledzenie lat i lng znacznika przeciągalnego jest dość proste. Zacznijmy od następującego HTML i CSS jako naszej bazy.

<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 należy pamiętać, że powinien być dołączony do zdarzenia onload Twojego okna, aby został załadowany, ale przeskoczę do kod: 

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 dragstart, aby śledzić początek przeciągania i dragend do dracka, gdy marker przestanie być przeciągany, a sposób, w jaki go dołączamy, to użycie google.maps.event.addListener. To, co tutaj robimy, to ustawianie zawartości div current, gdy marker jest przeciągany, a następnie ustawianie znacznika lat i lng, gdy przeciąganie się zatrzymuje. Zdarzenie myszy Google ma nazwę właściwości "latlng", która zwraca " google.mapy.Latlng ' Obiekt, gdy zdarzenie zostanie wywołane. Więc to, co robimy tutaj, to w zasadzie korzystanie z identyfikator dla tego detektora, który jest zwracany przez google.maps.event.addListener i pobiera właściwość latLng, aby wyodrębnić bieżącą pozycję dragend. Gdy dostaniemy to latanie, gdy opór się zatrzyma, wyświetlimy w twoim 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>';
});
Na koniec wyśrodkujemy nasz znacznik i wyświetlamy go na mapie:]} 
map.setCenter(myMarker.position);
myMarker.setMap(map);
Daj znać, jeśli masz jakieś pytania dotyczące mojej odpowiedzi.
 136
Author: KJYe.Name 葉家仁,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-03-16 14:02:02 
var lat = marker.getPosition().lat();
var lng = marker.getPosition().lng();

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

 41
Author: José David Bedoya,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-10-29 15:57:07

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

Jeśli korzystasz z przestarzałej, v2 API JavaScript, możesz wywołać getLatLng() on GMarker.

 31
Author: no.good.at.coding,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-12-12 14:32:28

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();
});
 20
Author: Rolwin Crasta,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-10-24 10:38:01 
// 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 );
 8
Author: Thiago Mata,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-12 16:15:10

Należy dodać detektor na znaczniku i nasłuchać zdarzenia drag lub dragend i zapytać Zdarzenie o jego pozycję po otrzymaniu tego zdarzenia.

Zobacz http://code.google.com/intl/fr/apis/maps/documentation/javascript/reference.html#Marker do opisu zdarzeń wywołanych przez znacznik. Zobacz też http://code.google.com/intl/fr/apis/maps/documentation/javascript/reference.html#MapsEventListener dla metod pozwalających na dodawanie detektorów zdarzeń.

 2
Author: JB Nizet,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-03-13 15:44:54 

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>
 2
Author: Manikandan Ece,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-07-25 19:37:18

Jest wiele odpowiedzi na to pytanie, które nigdy mi nie odpowiadało (w tym sugerowanie getPosition (), które nie wydaje się być metodą dostępną dla obiektów markerów). Jedyną metodą, która zadziałała dla mnie w maps V3 jest (po prostu): 

var lat = marker.lat();
var long = marker.lng();
 -3
Author: Pr Shadoko,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-02-20 10:42:47