在Google地图上使用 C# 和 JavaScript,显示你的数据

分享于 

6分钟阅读

Web开发

  繁體

sampleMap.JPG

如何使用代码

假设您在数据库中有一个表,该表有两列地球坐标,您希望在Google地图上绘制该图,如下所示:

db.JPG 现在如何在Google地图上绘制这些数据?Google提供了一些API方法,可以在JavaScript中调用,并且提供坐标来在地图上放置marker,首先,你需要在HTML的header标记中添加API的引用,如下所示:
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;
 sensor=false&amp;key=abcdefg" type="text/javascript"></script> 

注:在发布网站之前,你需要从Google获得网站的唯一密钥,为了在localhost上进行测试,您可以按原样使用上面的代码。

第二,你必须在页面中放置一个div元素来显示Google地图,根据你的布局需要设置它大小,等等。

<divid="map_canvas"style="width: 100%; height: 728px; margin-bottom: 2px;">

第三,你可以创建一个Google map对象,方法是将它传递给div元素,

var map = new GMap2(document.getElementById('map_canvas'));

例如,如果您想在地图中心看到伦敦,则可以使用

GLatLng(51.5,-0.1167)

现在,你可以使用map范围的缩放级别从1-20将这个点传递给setCenter方法,

map.setCenter(new GLatLng(51.5,-0.1167), 2);

然后,你可以在地图上指定一个位置,以便Google将marker放在该位置,方法是调用addOverlay方法,将GMarker对象作为参数,例如,要在多伦多放置标记,您可以在脚本中编写以下行。

map.addOverlay(new GMarker(new GLatLng(43.6667,-79.4168)));

可以指定任意数量的标记,将它们放到一个JavaScript函数中,并调用它onload页面的事件,完整的脚本如下所示:

<script type='text/javascript'> function initialize() { 
 if (GBrowserIsCompatible()) { 
 var map = new Map2(document.getElementById('map_canvas')); 
 map.setCenter(new GLatLng(51.5,-0.1167), 2); 
 map.addOverlay(new Marker(new GLatLng(43.6667,-79.4168))); 
 map.setUIToDefault(); 
} } </script> 
你必须在Google API服务器上生成JavaScript,并使用"asp:Literal"控件在客户端上呈现它,你还需要在页面中放置一个div控件,Google API可以在浏览器中呈现定制的地图,并添加对Google API脚本的引用,页面上只需要两个控件a Literaldiv,完整的HTML如下所示,包括Google API对MAP的引用,
<html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"><title>Your Data on Google Map </title><%--Google API reference--%><script src="http://maps.google.com/maps? file=api&amp;
 v=2&amp;sensor=false&amp;key=abcdefg" type="text/javascript"></script></head><body onload="initialize()" onunload="GUnload()"><form id="form1" runat="server"><asp:Panel ID="Panel1" runat="server"><%--Place holder to fill with javascript by server side code--%><asp:Literal ID="js" runat="server"></asp:Literal><%--Place for google to show your MAP--%><div id="map_canvas"style="width: 100%; height: 728px; 
 margin-bottom: 2px;"></div></asp:Panel></form></body></html>

现在如何在服务器上创建可以在地图上显示所有标记的脚本?你需要将上面讨论的表传递给它,该表在两列中包含经度和纬度值,用于要在地图上标记的点,并且此方法将生成包含页面上文字控件中所有地图标记的完整脚本。

private void BuildScript(DataTable tbl)
{
 String Locations = "";
 foreach (DataRow r in tbl.Rows)
 {
 // bypass empty rows if (r["Latitude"].ToString().Trim().Length == 0)
 continue;
 string Latitude = r["Latitude"].ToString();
 string Longitude = r["Longitude"].ToString();
 // create a line of JavaScript for marker on map for this record Locations += Environment.NewLine + " map.addOverlay
 (new GMarker(new GLatLng(" + Latitude + "," + Longitude + ")));";
 }
 // construct the final script js.Text = @"<script type='text/javascript'>
 function initialize() {
 if (GBrowserIsCompatible()) {
 var map = new GMap2(document.getElementById('map_canvas'));
 map.setCenter(new GLatLng(51.5,-0.1167), 2); 
" + Locations + @" map.setUIToDefault();
 }
 }
 </script>";
} 

在ASP表单的*.cs文件中调用此方法,它为Google创建一个完整的JavaScript,创建map和marker,

点击这里查看本文的在线演示,该站点在地图上为每个访问过网站的地点显示marker,以下是演示站点的快照。

MyApp.JPG

关于本文的更多细节和用法,你可以访问博客页面关于本文。

我为本文创建了一个示例项目,你可以下载,它还有一个示例access数据库,你可以简单地在Microsoft Visual Studio 2008中运行这个项目,而不用更改内容。


相关文章