Google işaretçisinden Lat / Lng alma

Sürüklenebilir bir işaretleyiciye sahip bir Google Haritalar haritası yaptım. Kullanıcı işaretçiyi sürüklediğinde, yeni enlem ve boylamı bilmem gerekiyor, ancak bunu yapmak için en iyi yaklaşımın ne olduğunu anlamıyorum.

Yeni koordinatları nasıl alabilirim?

İşte JSFiddle Demosu . Google Maps API V3'te, sürüklenebilir bir işaretçinin enlem ve boylamını izlemek oldukça kolaydır. Temel olarak aşağıdaki HTML ve CSS ile başlayalım.

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

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

#current{
     padding-top: 25px;
}

İşte google haritasını başlatan ilk JavaScript'imiz. Sürüklemek istediğimiz bir işaretleyici oluşturuyoruz ve bunun sürüklenebilir özelliğini true olarak ayarlıyoruz. Elbette, yüklenebilmesi için pencerenizin bir yükleme olayına eklenmesi gerektiğini unutmayın, ancak koda geçeceğim:

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

Burada dragstart, sürüklemenin başlangıcını izlemek ve dragendişaretleyicinin sürüklenmesini bıraktığında kaymak için iki olay ekliyoruz ve bunu kullanma şeklimiz google.maps.event.addListener. Burada yaptığımız şey current, işaretçi sürüklenirken div'in içeriğini ayarlamak ve ardından sürükleme durduğunda işaretleyicinin enlem ve boylamını ayarlamaktır. Google fare olayının, olay tetiklendiğinde "google.maps.LatLng" nesnesini döndüren "latlng" özellik adı vardır. Yani, burada yaptığımız şey, temelde bu dinleyici için, tarafından döndürülen google.maps.event.addListenerve latLngdragend'in mevcut konumunu çıkarmak için özelliği alan tanımlayıcıyı kullanmaktır. Sürükleme durduğunda Lat Lng'yi aldığımızda, div'inizde göstereceğiz current:

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

Son olarak, işaretçimizi ortalayacağız ve haritada göstereceğiz:

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

Cevabımla ilgili herhangi bir sorunuz olursa bana bildirin.

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

Daha fazla bilgi Google Maps API - LatLng adresinde bulunabilir.

Sadece diyebiliriz getPosition()üzerindeMarker - Bunu denediniz mi?

JavaScript API kullanımdan kaldırıldı, v2 iseniz, çağırabilir getLatLng()üzerindeGMarker .

bunu dene

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

İşaretçiye bir dinleyici eklemeli, sürükle veya sürükleme olayını dinlemeli ve bu olayı aldığınızda olaya konumunu sormalısınız.

İşaretçi tarafından tetiklenen olayların açıklaması için http://code.google.com/intl/fr/apis/maps/documentation/javascript/reference.html#Marker adresine bakın . Etkinlik dinleyicileri eklemeye izin veren yöntemler için http://code.google.com/intl/fr/apis/maps/documentation/javascript/reference.html#MapsEventListener'a bakın .

Bu soruya benim için hiç işe yaramayan pek çok yanıt var (buna işaret nesneleri için uygun bir yöntem gibi görünmeyen getPosition () önerme dahil). V3 haritalarında benim için çalışan tek yöntem (basitçe):

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