2011-10-26 20 views
56

ユーザーがdbに新しいレコードを入力したときの緯度と経度の2つのテキストボックスがあります。Google Maps API 3:右クリックから座標を取得する

Googleマップのライブプレビューがうまくいきました。ここでは、右クリックイベントを地図上に追加して、クリックしたコードで緯度/経度のテキストボックスに表示されます。

これも可能ですか?

私はイベントリスナーを追加する方法を知っていて、APIドキュメントを見ていますが、これを行うものは見当たりませんでした。私は彼らのウェブサイト上のGoogleの地図上でそれを行うことができることを知っています。

+0

私は私が何かを見つけたと思う、fromDivPixelToLatLngは、それが – guyfromfl

答えて

151
google.maps.event.addListener(map, "rightclick", function(event) { 
    var lat = event.latLng.lat(); 
    var lng = event.latLng.lng(); 
    // populate yor box/field with lat, lng 
    alert("Lat=" + lat + "; Lng=" + lng); 
}); 
+1

動作するかどうか、私は解決策を試して再投稿します。..良い探している笑、私はコードを書くのほぼ半日を過ごした、とだけこれはまさにそれであるので、それは削除されました。ありがとう!!! – guyfromfl

+0

どのマーカーがクリックされたのですか?それらを配列に格納することによって? – AndreaCi

+1

同じコードですが、「クリック」の「右クリック」を変更すると、左クリックすると機能します。ライブのすべてのイベントもここで見ることができます:https://developers.google.com/maps/documentation/javascript/events – Seoman

3

あなたがInfoWindowオブジェクト(class documentation here)を作成して、地図上のクリックした場所の緯度と経度を移入しますrightclickイベントハンドラをアタッチすることができます。

function initMap() { 
 
    var myOptions = { 
 
     zoom: 6, 
 
     center: new google.maps.LatLng(-33.8688, 151.2093) 
 
    }, 
 
    map = new google.maps.Map(document.getElementById('map-canvas'), myOptions), 
 
    marker = new google.maps.Marker({ 
 
     map: map, 
 
    }), 
 
    infowindow = new google.maps.InfoWindow; 
 
    map.addListener('rightclick', function(e) { 
 
    map.setCenter(e.latLng); 
 
    marker.setPosition(e.latLng); 
 
    infowindow.setContent("Latitude: " + e.latLng.lat() + 
 
     "<br>" + "Longitude: " + e.latLng.lng()); 
 
    infowindow.open(map, marker); 
 
    }); 
 
}
html, 
 
body { 
 
    height: 100%; 
 
} 
 
#map-canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAIPPUQ0PSWMjTsgvIWRRcJv3LGfRzGmnA&callback=initMap" async defer></script> 
 
<div id="map-canvas"></div>

関連する問題