我正在开发一个 ASP.Net 项目(c#)。我有与之链接的 SQL Server 数据库。该项目有该市的公司名单。一个页面将显示数据网格上的公司列表。单击公司将重定向到显示该公司详细信息的另一个页面。我想通过经度和纬度显示该公司的谷歌地图图片或谷歌街道图片以及该公司详细信息页面上的详细信息。每个酒店的详细信息将从数据库中获取以显示在该页面上,并且每个酒店的经度和纬度值也保存在数据库的列中。
如何参考来自数据库的经度和纬度值显示谷歌地图图片或谷歌街景图片?
要在网页上插入 Google Map,您可以使用Google Maps JavaScript API。所以,如果你有来自 db 的纬度和经度,你可以将这些参数插入到你的 JS 代码中:
center = new google.maps.LatLng(-34.397, 150.644)
1.你的cs函数从数据库中获取lat和lan
public string propLat = "";
public string propLan = "";
public void getLatLan(int PropertyId)
{
DataSet dstPropMap = Tbl_PropertyMaster.GetPropertyDetailsbyId(PropertyId);
if (dstPropMap.Tables[0].Rows.Count > 0)
{
propLat = dstPropMap.Tables[0].Rows[0]["Latitude"].ToString().Trim();
propLan = dstPropMap.Tables[0].Rows[0]["Longitude"].ToString().Trim();
}
}
2.参考谷歌链接并创建一个ID为'mapStreetView'的div
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="mapStreetView" style="height:500px;width:340px"></div>
3.aspx页面中你的JS
function initializeThisMap(lat,lan) {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(lat,lan),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('mapStreetView'),
mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
title: 'Click to zoom in'
});
google.maps.event.addListener(marker, 'click', function() {
map.setZoom(12);
map.setCenter(marker.getPosition());
});
}
4.调用JS函数(在aspx页面底部,不影响其他JS)
<script type="text/javascript">
initializeThisMap('<%= propLat %>','<%= propLan %>');
</script>
好吧,在你的 ASPX 页面上,你需要添加一个谷歌地图,那里有很多文章,但像这样:
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<div id="map" style="width: 356px; height: 566px;"></div>
<script type="text/javascript">
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: new google.maps.LatLng(<%=SomeLatValue %>, <%=SomeLongValue%>),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
</script>
然后,您需要拥有可以绑定的类级别属性名称 SomeLatValue 和 SomeLongValue(如代码所示)。