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 dragstart
untuk melacak awal menyeret dan dragend
mengering 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 current
saat 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.addListener
dan mendapatkan propertilatLng
untuk mengekstrak posisi dragend saat ini. Setelah kami mendapatkan Lat Lng itu saat seret berhenti, kami akan menampilkan dalam current
div 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
sumber
marker
sebelum 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?Anda hanya bisa menelepon
getPosition()
padaMarker
- Anda mencoba itu?Jika Anda berada di usang, v2 API JavaScript, Anda dapat menghubungi
getLatLng()
diGMarker
.sumber
getPosition()
mengembalikan sebuah objek, jadi untuk mendapatkan garis lintang / bujur secara khusus, Anda harus memanggillat()
danlng()
masing - masing dari itu.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(); });
sumber
// 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 );
sumber
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.
sumber
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>
sumber
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();
sumber
marker.position.lat()
danmarker.position.lng()
marker.getPosition().lat()
danmarker.getPosition().lng()