Mendapatkan Lat / Lng dari penanda Google

89

Saya membuat peta Google Maps dengan penanda yang bisa diseret. Saat pengguna menyeret penanda, saya perlu mengetahui garis lintang dan bujur yang baru, tetapi saya tidak mengerti apa pendekatan terbaik untuk melakukan itu.

Bagaimana saya bisa mendapatkan kembali koordinat baru?

Genadinik
sumber

Jawaban:

132

Ini adalah Demo JSFiddle . Di Google Maps API V3, cukup mudah untuk melacak lintang dan bujur dari penanda yang bisa diseret. Mari kita mulai dengan HTML dan CSS berikut sebagai basis kita.

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

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

#current{
     padding-top: 25px;
}

Berikut adalah JavaScript awal kami yang menginisialisasi peta google. Kami membuat penanda yang ingin kami seret dan setel properti draggable menjadi true. Tentu saja perlu diingat itu harus dilampirkan ke acara onload jendela Anda agar bisa dimuat, tetapi saya akan melompat ke kode:

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

Di sini kami melampirkan dua kejadian dragstartuntuk melacak awal menyeret dan dragendmengering ketika penanda berhenti diseret, dan cara kami melampirkannya adalah dengan menggunakannya google.maps.event.addListener. Apa yang kita lakukan di sini adalah menyetel konten div currentsaat marker diseret dan kemudian menyetel lat dan lng marker saat drag berhenti. Peristiwa Google mouse memiliki nama properti 'latlng' yang mengembalikan objek 'google.maps.LatLng' saat peristiwa tersebut dipicu. Jadi, apa yang kita lakukan di sini pada dasarnya menggunakan pengenal untuk pendengar ini yang dikembalikan oleh google.maps.event.addListenerdan mendapatkan propertilatLng untuk mengekstrak posisi dragend saat ini. Setelah kami mendapatkan Lat Lng itu saat seret berhenti, kami akan menampilkan dalam currentdiv Anda :

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

Terakhir, kami akan memusatkan penanda kami dan menampilkannya di peta:

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

Beri tahu saya jika Anda memiliki pertanyaan tentang jawaban saya.

KJYe.Name 葉家仁
sumber
3
Ini luar biasa! Saya memiliki peta dengan bidang masukan alamat pelengkap otomatis serta penanda yang dapat diseret. Saya juga perlu menampilkan koordinat bujur lintang jika seseorang menggunakan kolom input. Apakah ada solusi sederhana untuk ini?
Kirk Ross
39
var lat = marker.getPosition().lat();
var lng = marker.getPosition().lng();

Informasi lebih lanjut dapat ditemukan di Google Maps API - LatLng

José David Bedoya
sumber
bagaimana Anda membuat contoh markersebelum memanggil metode di atasnya? misalnya, saya melihat developers.google.com/maps/documentation/javascript/examples/… dan setelah pencarian dilakukan dan marker muncul, bagaimana cara mendapatkan lintang / bujur dari marker tersebut?
pengguna1063287
31

Anda hanya bisa menelepon getPosition()padaMarker - Anda mencoba itu?

Jika Anda berada di usang, v2 API JavaScript, Anda dapat menghubungi getLatLng()diGMarker .

no.good.at.coding
sumber
Saya pikir di mana kebingungan saya adalah kapan harus memanggil getPosition () - apakah itu sesuatu yang harus saya tambahkan ke konstruktor sehingga tahu untuk meminta koordinat saat penanda dipindahkan?
Genadinik
@Genadinik Contoh yang saya tautkan di suntingan saya mungkin bisa membantu; ini menunjukkan cara melampirkan listener untuk peristiwa tarik di mana Anda dapat menanyakan posisi penanda dan menggunakannya sesuka Anda.
no.good.at.coding
Ah keren, dan jika saya ingin menyimpan koordinat di sesi atau db, haruskah saya melakukannya melalui panggilan AJAX? Atau ada cara yang lebih sederhana?
Genadinik
Saya tidak bisa memikirkan sesuatu yang lebih sederhana daripada posting Ajax cepat dengan id penanda dan koordinatnya saat ini :) Tetapi Anda dapat mempertimbangkan pembaruan batch atau setidaknya menunggu beberapa detik sampai setelah drag selesai dan melihat bahwa pengguna tidak mulai lagi seret sehingga Anda tidak membanjiri server dengan permintaan saat penanda sedang dalam proses diseret - tunggu hingga posisi stabil. Ini tentu saja tergantung pada seberapa jauh Anda mampu untuk memiliki status sisi server Anda dibandingkan dengan apa yang dilihat klien.
no.good.at.coding
1
getPosition()mengembalikan sebuah objek, jadi untuk mendapatkan garis lintang / bujur secara khusus, Anda harus memanggil lat()dan lng()masing - masing dari itu.
Jeff Puckett
20

coba ini

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
sumber
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
sumber
2

Anda harus menambahkan listener pada marker dan mendengarkan event drag atau drag, dan menanyakan posisi event ketika Anda menerima event ini.

Lihat http://code.google.com/intl/fr/apis/maps/documentation/javascript/reference.html#Marker untuk deskripsi peristiwa yang dipicu oleh penanda. Dan lihat http://code.google.com/intl/fr/apis/maps/documentation/javascript/reference.html#MapsEventListener untuk metode yang memungkinkan untuk menambahkan event listener.

JB Nizet
sumber
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
sumber
1
Meskipun kode ini dapat menjawab pertanyaan, memberikan informasi tentang bagaimana dan mengapa itu memecahkan masalah meningkatkan nilai jangka panjangnya.
L_J
-3

Ada banyak jawaban untuk pertanyaan ini, yang tidak pernah berhasil untuk saya (termasuk menyarankan getPosition () yang sepertinya bukan metode yang tersedia untuk objek penanda). Satu-satunya metode yang berhasil untuk saya di maps V3 adalah (sederhana):

var lat = marker.lat();
var long = marker.lng();
Pr Shadoko
sumber
1
Saya pikir maksud Anda marker.position.lat()danmarker.position.lng()
Jeff Puckett
Atau Anda perlu menggunakan marker.getPosition().lat()danmarker.getPosition().lng()
Sergio Reis
Anda tidak dapat menggunakan "long" sebagai variabel
Dinith