Googleマーカーからの緯度/経度の取得

ドラッグ可能なマーカーでGoogleマップの地図を作成しました。ユーザーがマーカーをドラッグするとき、私は新しい緯度と経度を知る必要がありますが、それを行うための最良のアプローチが何であるかわかりません。

新しい座標を取得するにはどうすればよいですか？

こちらがJSFiddle Demoです。Google Maps API V3では、ドラッグ可能なマーカーの緯度と経度を追跡するのは非常に簡単です。以下のHTMLとCSSをベースとして始めましょう。

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

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

#current{
     padding-top: 25px;
}

これは、Googleマップを初期化する最初のJavaScriptです。ドラッグしたいマーカーを作成し、そのdraggableプロパティをtrueに設定します。もちろん、それをロードするには、ウィンドウのonloadイベントにアタッチする必要があることに注意してください。ただし、コードにはスキップします。

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

ここでは、2つのイベントをアタッチしてdragstart、ドラッグの開始を追跡しdragend、マーカーがドラッグされなくなったときにドラックしますgoogle.maps.event.addListener。アタッチする方法は、を使用することです。ここではcurrent、マーカーがドラッグされているときにdiv のコンテンツを設定し、ドラッグが停止したときにマーカーの緯度と経度を設定しています。Googleマウスイベントにはプロパティ名「latlng」があり、イベントがトリガーされると「google.maps.LatLng」オブジェクトを返します。したがって、ここでは、基本的に、によって返されるこのリスナーの識別子を使用して、ドラッグエンドの現在の位置を抽出するgoogle.maps.event.addListenerためのプロパティlatLngを取得しています。ドラッグが停止したときにLat Lngを取得すると、currentdiv 内に表示されます。

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

私の回答について質問がある場合はお知らせください。

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

詳細については、Google Maps API-LatLngをご覧ください。

あなただけ呼び出すことができますgetPosition()にMarker -あなたはそれを試してみましたか？

あなたがJavaScriptのAPIの非推奨、V2にしている場合は、呼び出すことができますgetLatLng()にGMarker。

これを試して

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

マーカーにリスナーを追加して、dragまたはdragendイベントをリッスンし、このイベントを受け取ったときにイベントの位置を確認する必要があります。

マーカーによってトリガーされるイベントの説明については、http：//code.google.com/intl/fr/apis/maps/documentation/javascript/reference.html#Markerをご覧ください。また、イベントリスナーを追加できるメソッドについては、http：//code.google.com/intl/fr/apis/maps/documentation/javascript/reference.html#MapsEventListenerをご覧ください。

この質問にはたくさんの答えがありますが、私にはうまくいきませんでした（マーカーオブジェクトに使用できるメソッドではないように思われるgetPosition（）を提案することを含む）。マップV3で私のために働いた唯一の方法は（単純に）です：

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