1

現在地を表示する Google マップがあり、マップをクリックすると、情報ウィンドウに緯度と経度を表示する新しいマーカーが追加されます。私はそれで満足しています。

私がやりたいことは、その緯度と経度が、その場所に関する詳細とともに同じページにあるフォームに入力されることです。その情報はデータベースに送信されます。

これはJavaScriptです：

var map;
var marker2;
var infowindow2;
var infowindow;
function getLocation() 
{
if (navigator.geolocation) 
{
    navigator.geolocation.getCurrentPosition(showPosition, placeMarker, showError);
}
else
{
    x.innerHTML = "Geolocation is not supported by this browser.";
}  
}
function showPosition(position)
{
    lat2 = position.coords.latitude;
lon = position.coords.longitude;
latlon = new google.maps.LatLng(lat2, lon)
mapholder = document.getElementById('mapholder')   

var mapProp = 
{
    center: latlon, zoom: 17,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false,
    navigationControlOptions:{style: google.maps.NavigationControlStyle.SMALL}
};

map = new google.maps.Map(document.getElementById("mapholder"),mapProp);
var marker = new google.maps.Marker({ position: latlon, map:map, title: "You are Here"});
marker.setMap(map);
infowindow2 = new google.maps.InfoWindow({ content:"You are Here!" + "<br>Click on desired location to generate latitute and longitude coordinates;" + "<br>Click 'Send' to enter Latitude and Longitude co-ordinates into form"});
infowindow2.open(map,marker);

google.maps.event.addDomListener(window, 'load', getLocation);
google.maps.event.addListener(map, 'click', function(event) 
{
    placeMarker(event.latLng);
});
}
function placeMarker(location) 
{
 if (!marker2) 
 {
     marker2 = new google.maps.Marker({ position: location, map: map, icon: 'Icon/aed4.jpg' });
 }
 else 
 {
     marker2.setPosition(location);
 }

 google.maps.event.addListener(marker2, 'click', function (event) 
 {
     document.getElementById("latbox").value = event.lat();
     document.getElementById("lngbox").value = event.lng();
 });

 infowindow = new google.maps.InfoWindow({ content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng() });
 infowindow.open(map, marker2);
 infowindow2.close(map, marker2);

 google.maps.event.addDomListener(window, 'load', showPosition);
}
google.maps.event.addDomListener(window, 'load', placeMarker);
infowindow.close(map, marker2);

これは私が配置したいフォームです：

    <div id="formlocation">
        <table class="style1">
            <tr>
                <td class="style2">
                    <asp:Label ID="buildingLbl" runat="server" Text="Building Name:"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="buildingTxt" runat="server"></asp:TextBox>
                </td>
            </tr>
            Latitude:<input size="20" id="latbox" type="text" name="lat" />
            <br />
            Longitude:<input size="20" id="lngbox" type="text" name="lng" />
            <br />

それらをテキストボックスに入れようとしましたが、それも機能しませんでした。

また、テキスト ボックスと同じように、入力領域から SQL に情報を送信することはできますか?

私はここで答えを見つけたと思いましたが、私が間違っていることを理解することはできません.うまくいけば、簡単な解決策があります.私は初心者です.

このウェブサイトの例のようなものを考えていました。マップをクリックして移動できるマーカーは 1 つだけで、これにより緯度と経度のフィールドの値が変更されます。

これまでに持っているもののスクリーンショットを追加していましたが、評判が10になるまでできません...マップをクリックしてマーカーを移動すると、座標がフィールドに入力されます。インフォウィンドウで「送信」をクリックして座標をフォームに入力する必要があることは知っていますが、理想的には、マップをクリックしてマーカーを移動すると変化します。

infoWindow の緯度と経度の値をフォームに入力します。私の例では緯度と経度の 2 つのフィールドがありますが、それは TextBox と入力フィールドに値を取得しようとしているからです。

フォームの下部に、すべての情報をデータベース (SQL) に送信する [送信] ボタンが必要です。

これが私が求めているものを説明するのに役立つことを願っています...

4

1 に答える 1

0

Javascript を使用してテキストボックスの値を設定できるはずです

このようなもの：

function showPosition(position)
{
    lat2 = position.coords.latitude;
    lon = position.coords.longitude;
    latlon = new google.maps.LatLng(lat2, lon)
    mapholder = document.getElementById('mapholder')

     fillLatLon(lat, lon);
    }

function fillLatLon(lat, lon)
{ 
     $('#latbox').val(lat);
     $('#lngbox').val(lon);
}
于 2013-02-11T22:45:31.963 に答える