ユーザーが場所を特定する必要がある場所に記入する必要があるフォームがあります。フォームに緯度と経度の入力フィールドがあります。小数の緯度と経度も探しています。私が欲しいものは本当にシンプルに思えます。ユーザーがクリックして地図 (google または yahoo) をポップアップ表示できるリンクが必要なだけで、地図を使用して場所を見つけてクリックするだけで、緯度と緯度の 2 つの入力フィールドが自動的に入力されます。地図から長い。誰もこれを以前にやったことがありますか?
4 に答える
Google Maps API を使用すると、これを非常に簡単に行うことができます。click
クリック イベント ハンドラーをマップ オブジェクトに追加するだけで、ユーザーがクリックした場所の緯度/経度座標が渡されます (イベントの詳細については、こちらを参照してください)。
function initMap()
{
// do map object creation and initialization here
// ...
// add a click event handler to the map object
GEvent.addListener(map, "click", function(overlay, latLng)
{
// display the lat/lng in your form's lat/lng fields
document.getElementById("latFld").value = latLng.lat();
document.getElementById("lngFld").value = latLng.lng();
});
}
コードは Google マップ API バージョン 3 用です。v2 は減価償却されているため、v3 を使用することをお勧めします。
マップがロードされる ID mapdiv の div を持っている
id latlng を持つ入力要素を使用して、マップをクリックしたときに緯度と経度を表示します。人々がその値を別のアプリケーションにコピーできるようにします。必要に応じて opts 変数を変更できます。
コードのように、クリック イベントのイベント ハンドラーを追加します。マップをクリックすると、入力要素に緯度と経度の値が入力されます。
var map;
function mapa()
{
var opts = {'center': new google.maps.LatLng(26.12295, -80.17122), 'zoom':11, 'mapTypeId': google.maps.MapTypeId.ROADMAP }
map = new google.maps.Map(document.getElementById('mapdiv'),opts);
google.maps.event.addListener(map,'click',function(event) {
document.getElementById('latlng').value = event.latLng.lat() + ', ' + event.latLng.lng()
})
}
必要なものは上記だけです。
マップ上にマウスを移動したときに緯度と経度の値を表示する場合は、次のコードのようにマウス移動イベント リスナーを追加します。スパンまたは入力要素を使用して値を表示できます。コードでスパンを使用していました。
google.maps.event.addListener(map,'mousemove',function(event) {
document.getElementById('latspan').innerHTML = event.latLng.lat()
document.getElementById('lngspan').innerHTML = event.latLng.lng()
});
マップ上の少なくとも2つのポイントの緯度/経度を知る必要があります。できれば、あまり接近していないことと、1つのコーナーを基準にしたピクセル座標も知っている必要があります(つまり、最良の2つのポイントは反対側のコーナーになります)。次に、補間によってクリックのピクセル座標を緯度/経度に変換するのは簡単な計算です。ただし、これは、マップでカバーされる領域が地球の曲率に対して「フラット」である場合にのみ機能することに注意してください。マップが広い範囲、たとえば幅6000マイルをカバーしている場合、かなりの歪みが発生します。これを正確にする必要がある場合は、位置を計算するために地図投影を行う必要があります。
Google Maps API と次のリンクを確認してください: http://www.gorissen.info/Pierre/maps/googleMapLocation.php
Google Maps API は、おそらくあなたが探していることを実行できると思います。