将纬度和经度发送到表单(提交到数据库)
本文关键字:表单 数据库 提交 纬度 经度 | 更新日期: 2023-09-27 17:58:31
我有一个显示我当前位置的谷歌地图,当我点击地图时,会添加一个新的标记,在信息窗口中显示纬度和经度。我很高兴。
我想做的是将该纬度和经度输入到我在同一页上的表格中,并附上该位置的详细信息。然后,这些信息将被发送到数据库中。
这是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中吗?
我以为我在这里找到了答案,但不知道我做错了什么——希望有一个简单的解决方案——我是个新手。。。感谢所有的帮助。
我在想这个网站的例子。我只有一个可以通过点击地图移动的标记,这会更改纬度和经度字段中的值。
我在截图中添加了到目前为止我所拥有的东西,但我不能,直到我有了10个声誉。。。我希望coords在通过点击地图移动标记时填充字段。我知道我可以在信息窗口中单击"发送"将坐标输入表格,但理想情况下,当你点击地图移动标记时,坐标会发生变化。
我希望infoWindow中的Latitude和Longitude值进入表单。在我的示例中,Latitude有两个字段,但这是我试图将值放入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);
}