我有一个显示我当前位置的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中?

我以为我找到了答案here,但无法弄清楚我在做什么错-希望有一个不错的简单解决方案-我是新手...感谢所有帮助。

我在想类似此网站EXAMPLE的内容。我只有1个标记,可以通过单击地图来移动,这会更改纬度和经度字段中的值。

我正在添加到目前为止的屏幕快照,但是直到我有10个声誉时我才能添加...我希望坐标随着单击地图来移动标记而填充字段。我知道我已经在InfoWindow中单击“发送”以将坐标输入到表单中,但是理想情况下,当您通过单击地图移动标记时,它会发生变化。

我希望infoWindow中的纬度和经度值进入表单。在我的示例中,我有两个用于纬度和经度的字段,但这是我试图将值输入到TextBox和输入字段中的结果。

表单底部应有一个“提交”按钮,用于将所有信息发送到数据库(SQL)。

希望这有助于解释我的追求...

最佳答案

您应该能够使用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);
}

10-06 05:36