我正在开发一个 ASP.Net 项目。我有与之链接的 SQL Server 数据库。该项目有该市现有的酒店清单。一个页面将在网格视图上显示酒店列表。点击酒店将重定向到显示该酒店详细信息的另一个页面。我想通过经度和纬度显示该酒店的谷歌地图图片或谷歌街道图片以及该酒店详细信息页面上的详细信息。每个酒店的详细信息将从数据库中获取并显示在该页面上，并且每个酒店的经度和纬度值也会保存在数据库的列中。
如何参考来自数据库的经度和纬度值显示谷歌地图图片或谷歌街景图片？
【问题讨论】：
标签： c# asp.net sql google-maps
这是一个使用 jQuery 和 google maps javascript API 的简单示例：
var map = new google.maps.Map(
$('#map')[0],
{
zoom: 50,
center: new google.maps.LatLng(52.250486, 4.432766),
mapTypeId: 'terrain',
streetViewControl: true
}
);
map.StreetView = new google.maps.StreetViewPanorama(
$('#map')[0],
{
position: map.getCenter(),
pov: { heading: 0, pitch: 0, zoom: 1
}
});
您可以在 ASP.NET .aspx 文件中使用类似这样的内容，而不是硬编码的纬度和经度：
...
zoom: 50,
center: new google.maps.LatLng(
<%= string.Format(CultureInfo.InvariantCulture.NumberFormat,
"{0:0.0000}", YourLatitude) %>,
<%= string.Format(CultureInfo.InvariantCulture.NumberFormat,
"{0:0.0000}", YourLongitude) %>),
mapTypeId: 'terrain',
...
Live demo at JSFiddle.阳光明媚的海滩……嗯！
【讨论】：
<html>
<head>
<title>Google Map Integration</title>
</head>
<body>
<div>
<!-- Google Map [Div]-->
<div id="googleMap" style="width:auto; height:800px;"></div>
<!-- END: Google Map [Div]-->
</div>
<!--Google Map-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
//Load Google-Map on [Page-Load]
google.maps.event.addDomListener(window, 'load', resetMap());
function resetMap() {
//Google-Map DefaultPosition
var defaultPostion = new google.maps.LatLng(0, 0);
//Set Google-Map properties:
var mapProperties = {
center: defaultPostion,
zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//Load Google-Map on "googleMap" [div]
var map = new google.maps.Map(document.getElementById("googleMap"), mapProperties);
var locations = [
['Tool Tip: Dubai', 25.10789521446838, 55.1819798029785, '<div><p>Dubai is the most populous city and emirate in the United Arab Emirates (UAE), and the second largest emirate by territorial size after the capital, Abu Dhabi. Dubai is located on the southeast coast of the Persian Gulf and is one of the seven emirates that make up the country.</p></div>'],
['Tool Tip: Houston', 29.9928829, -95.4859515, '<div><p>Houston is the most populous city in Texas and the fourth most populous city in the United States. According to the 2012 U.S. Census estimates, the city had a population of 2.16 million people within a land area of 599.6 square miles.</p></div>'],
['Tool Tip: London', 51.51121389999999, -0.11982439999997041, '<div><p>London is the capital city of England and the United Kingdom. It is the most populous city in the United Kingdom with a metropolitan area of over 13 million inhabitants.</p></div>'],
['Tool Tip: Riyadh', 24.7116667, 46.72416670000007, '<div><p>Riyadh is the capital and largest city of Saudi Arabia. It is also the capital of Riyadh Province, and belongs to the historical regions of Najd and Al-Yamama.</p></div>'],
['Tool Tip: Karachi', 24.872769, 67.091738, '<div><p>Karachi is capital of Sindh as well as the largest and most populous metropolitan city of Pakistan and its main seaport and financial centre of the country.</p></div>']
];
for (i = 0; i < locations.length; i++) {
var currentToolTip = locations[i][0]
var currentLatitude = locations[i][1]
var currentLongitude = locations[i][2]
var currentContent = locations[i][3]
var currentPostion = new google.maps.LatLng(currentLatitude, currentLongitude);
//Add the [Marker] in Google-Map
var marker = new google.maps.Marker({
position: currentPostion,
map: map,
title: currentToolTip
});
//Initialize [Info Window] for each [Marker]
var infoWindow = new google.maps.InfoWindow();
//Add Listener for [Marker] "click"
google.maps.event.addListener(marker,'click', (function(marker,currentContent){
return function() {
infoWindow.setContent(currentContent);
infoWindow.open(map,marker);
};
})(marker,currentContent));
}
}
</script>
<!--END: Google Map-->
</body>
</html>
【讨论】：