2009-11-12 5 views
10

私は、ユーザーが場所を特定する必要がある場所を記入する必要があるフォームを持っています。フォーム上に緯度と経度の入力フィールドがあります。私は小数点以下緯度も求めています。私が望むものは本当にシンプルなようです。私はちょうどユーザーがクリックすることができるリンクを持っています。それは地図(googleかyahoo)をポップアップし、地図を使って場所を見つけてちょうどそれをクリックすると、自動的に緯度と経度の2つの入力フィールドが設定されます長い地図から。誰もこれを前にしたことがありますか?マップをクリックしてフォームに緯度と経度のフィールドを入力する方法を教えてください。

+0

私はこの質問をよく理解していません。あなたはそれを言い換えたり、それを明確にすることができますか? – Mark

+0

私はそれをより良く説明する方法を知らない。私は緯度と経度の各フィールドに地図をクリックしたときの値を入力するだけです。私はGoogle Earthを使用して知っている、あなたが十進の緯度と長い値を見ることができるステータスバーの上にマウスポインタを置くように。マップ上のポイントをクリックするだけで、これらの2つの値をマップからフォームフィールドに転送する方法が必要です。私は本当にそれを説明する他の方法を本当に知らない。 – Joe

答えて

0

マップ上の少なくとも2つの点の緯度/経度を知っている必要があります。あまり近接していないことが好ましく、1つのコーナーに対してピクセル座標がわかっている必要があります。次に、補間によってクリックのピクセル座標を緯度/経度に変換するのは簡単な計算です。ただし、マップの対象範囲が地球の曲率に対して「フラット」である限り、これは有効です。地図が広いエリア、例えば6000マイルの幅をカバーする場合、大きな歪みが存在するであろう。これを正確にする必要がある場合は、位置を計算するために地図投影を行う必要があります。

0

は、Google MapsのAPIと同様に、このリンクをチェックアウト:http://www.gorissen.info/Pierre/maps/googleMapLocation.php

私はGoogle MapsのAPIは、おそらくあなたが探しているものを行うことができると思います。

+0

GoogleマップのAPI http://code.google.com/apis/maps/documentation/reference.html – kmontgom

+0

リンクをありがとう、私はそれをチェックアウトするつもりです。 – Joe

11

Google Maps APIを使用すると、これを簡単に行うことができます。クリックイベントハンドラをマップオブジェクトに追加するだけで、ユーザーがクリックした場所の緯度/経度座標が渡されます(clickイベントhereの詳細を参照)。

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

コードはGoogleマップのapiバージョン3用です。v2はv3に固執するほど優れています。

はマップが

あなたは地図をクリックしたときに緯度とLNGを表示するには、IDの緯度経度を入力要素を使用してロードされたID mapdivとのdivを持っています。人々がその価値を別のアプリケーションにコピーすることができます。必要に応じてopts変数を変更できます。

コード内のクリックイベントのイベントハンドラを追加します。マップをクリックすると、input要素にはlat値とlng値が設定されます。

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

上記はすべて必要なものです。


あなたがマップ上にマウスを移動すると、緯度とLNGの値を確認したい場合は、次のコードのようにマウス移動イベントリスナーを追加します。スパンや入力要素を使って値を見ることができます。私は自分のコードでspanを使っていました。

google.maps.event.addListener(map,'mousemove',function(event) { 
    document.getElementById('latspan').innerHTML = event.latLng.lat() 
    document.getElementById('lngspan').innerHTML = event.latLng.lng() 
}); 
関連する問題