Mendapatkan Lat / Lng dari penanda Google

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?

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.

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

Informasi lebih lanjut dapat ditemukan di Google Maps API - LatLng

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

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

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

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

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.

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