文件名称：在ASP.NET中使用Google Map
文件大小：92KB
文件格式：ZIP
更新时间：2011-08-18 04:44:18
Google Map Earth ASP.NET
简介
很多人都知道Google Earth（Google Map)，其实，Google为我们自己开发应用程序提供了丰富的API，我们只要具备一些JavaScript的知识，就完全可以利用它们。但是，对于我来说，在ASP.NET页面中使用JavaScript来调用Google Map的API有一定难度，尤其是利用服务器端函数来动态画出Google Map。例如，我想从SQL Server中读取经纬度信息，然后在Google Map中插入一个点。如果熟悉AJAX的话，很快就能得出答案。我们必须用JavaScript调用ASP.NET服务器端函数，利用得到的数据来绘制Google Map。简单吧？其实，对于我来说并非如此。因此，我决定开发一个用户控件来处理JavaScript代码，这样，我就能集中精力于服务器端函数了。
特点
1.不需要JavaScript知识就能绘制Google Maps，只需在相应页面加入自定义控件即可。
2.使用AJAX调用来获取服务器端数据。
3.提供最优越的性能表现。
如何使用
在这里，我并不想解释我是如何创建该控件的。我只要教你如何使用它。
系统需求
1.Visual Studio 2005或更高版本
2.Microsoft ASP.NET AJAX Extensions支持
3.Internet Explorer 7.0或Mozilla Firefox 2.x
你只需完成以下几步：
1.新建一个ASP.NET AJAX-Enabled Website。
2.将源代码中App_Code文件夹、GoogleMapForASPNet.ascx、GoogleMapForASPNet.ascx.cs，GService.asmx复制到你的ASP.NET应用程序下。
3.保证你的网站支持AJAX技术。
4.打开Default.aspx（或任何你想加入Google Map的位置），将该自定义控件拖放至相应位置并编译，这样就实现了最简单的带有Google Map的ASP.NET网页。
现在我们来为Google Map加一些标注点。在Page_Load()事件中加入一些代码。
向Google Map控件传参
注意：使用时必须首先设定你的Google Maps API key（可以从Google免费获取）。
以下是代码：
if (!IsPostBack)
{
GoogleMapForASPNet1.GoogleMapObject.APIKey = "
GoogleMapForASPNet1.GoogleMapObject.APIVersion = "2"; //选择Google Maps API版本
GoogleMapForASPNet1.GoogleMapObject.Width = "800px";
GoogleMapForASPNet1.GoogleMapObject.Height = "600px"; //定义Google Map控件的大小
GoogleMapForASPNet1.GoogleMapObject.ZoomLevel = 14; //定义缩放级别，默认值为3
GoogleMapForASPNet1.GoogleMapObject.CenterPoint = new GooglePoint("CenterPoint", 31.19, 120.37); //定义地图中心位置
GoogleMapForASPNet1.GoogleMapObject.Points.Add(new GooglePoint("1", 31.19, 120.37)); //在指定经纬度定义新的地图标注点
}
这样，就能自定义地图加载位置和标注点了。
自定义标注点图标
该控件支持自定义标注点图标。首先，将图标文件复制到你的网站目录下，接着，使用以下赋值语句：
GP.IconImage = "icons/pushpin-blue.png";
还可以为标注点添加注释，当用户单击标注点时，能看到注释内容。代码：
GP.InfoHTML = "这是一个标注点";
至此，已经介绍了使用Google Maps Control的基本内容。接下来，我们来看一下它的高级功能。例如，当用户进行某些操作时移动标注点。
创建交互式地图
该控件支持用户创建交互式地图。下面这个例子是，当用户单击按钮时，移动标注点。以下是使用方法：
1.插入一个Button控件，在它的Click事件中加入以下代码：
protected void Button1_Click(object sender, EventArgs e)
{
GoogleMapForASPNet1.GoogleMapObject.Points["1"].Latitude += 0.003;
GoogleMapForASPNet1.GoogleMapObject.Points["1"].Longitude += 0.003;
}
可以自主控制经纬度的增量。
2.运行该页面，你将发现整个页面都会被刷新或回传。为了避免这种现象，我们只需要把这个Button控件加入UpdatePanel控件中。
3.重新运行该页面，可看到该页面已经一切正常了。
自动更新和GPS导航
我们可以使用AJAX框架中的Timer控件来实现这一功能。在Timer_Tick()事件中，可以定义标注点新的经度和纬度。这样，在指定的时间间隔后，地图上所有的标注点都会自动更新。你也可以连接到GPS设备，构成一个GPS导航系统。
使用Google Maps Control绘制折线
1.首先，添加该折线的各个端点。代码如下：
GooglePoint GP1 = new GooglePoint();
GP1.ID = "GP1";
GP1.Latitude = 31.19; //定义标注点纬度
GP1.Longitude = 120.37; //定义标注点纬度
GP1.InfoHTML = "这是标注点1"; //可选注释项
GoogleMapForASPNet1.GoogleMapObject.Points.Add(GP1); //在地图上添加这个点
GooglePoint GP2 = new GooglePoint();
GP2.ID = "GP2";
GP2.Latitude = 31.19001;
GP2.Longitude = 120.37001;
GP2.InfoHTML = "这是标注点2";
GoogleMapForASPNet1.GoogleMapObject.Points.Add(GP2);
GooglePoint GP3 = new GooglePoint();
GP3.ID = "GP3";
GP3.Latitude = 31.19003;
GP3.Longitude = 120.36998;
GP3.InfoHTML = "这是标注点3";
GoogleMapForASPNet1.GoogleMapObject.Points.Add(GP3);
2.利用这些点绘制折线
GooglePolyline PL1 = new GooglePolyline(); //定义折线
PL1.ID = "PL1";
PL1.ColorCode = "#0000FF"; //定义折线颜色
PL1.Width = 5; //定义折线宽度
PL1.Points.Add(GP1); //加入这些点（绘制折线）
PL1.Points.Add(GP2);
PL1.Points.Add(GP3);
3.将折线加入Google Maps Control中
GoogleMapForASPNet1.GoogleMapObject.Polylines.Add(PL1);
使用Google Maps Control绘制多边形
1.按照上面的方法加入多边形各顶点。这里不再赘述。
2.使用这些点创建一个多边形。代码如下：
GooglePolygon PG1 = new GooglePolygon(); //定义多边形
PG1.ID = "PG1";
PG1.FillColor = "#0000FF"; //定义多边形各条边的颜色
PG1.FillOpacity = 0.4;
PG1.Points.Add(GP1); //将上面创建的各点加入多边形（作为顶点）
PG1.Points.Add(GP2);
PG1.Points.Add(GP3);
……………………………………
PG1.Points.Add(GPn); //第n个顶点
3.将多边形加入Google Maps Control中
GoogleMapForASPNet1.GoogleMapObject.Polygons.Add(PG1);
【文件预览】：
使用方法.txt
GoogleMapControl
----MapWithClickablePushpins.aspx.cs(2KB)
----SimpleMapWithNoBubble.aspx.cs(2KB)
----Default.aspx(2KB)
----MapWithAutoChangingPushpins.aspx(1KB)
----MapWithToolTipOnPushpins.aspx.cs(3KB)
----MapWithPolygons.aspx(1KB)
----MapWithClickablePushpins.aspx(881B)
----GNU General Public License.txt(159B)
----ControlPerformanceTest.aspx.cs(4KB)
----MapWithAutoChangingPushpins.aspx.cs(3KB)
----SimpleMapWithNoBubble.aspx(713B)
----GoogleMapForASPNet.ascx(20KB)
----MapWithRecenter.aspx(1KB)
----MapWithPolylines.aspx.cs(4KB)
----icons()
--------SchoolBus.png(7KB)
--------RedCar.png(6KB)
--------recycle.png(1KB)
--------Truck.png(7KB)
--------FireTruck.png(7KB)
--------golf.png(1KB)
--------rain.png(1KB)
--------pushpin-yellow.png(1KB)
--------1.png(1KB)
--------snow.png(2KB)
--------YellowCar.png(6KB)
--------storm.png(2KB)
--------2.png(1KB)
--------pushpin-blue.png(1KB)
--------sun.png(2KB)
--------horse.png(1KB)
--------3.png(1KB)
----App_Code()
--------GService.cs(9KB)
--------cGoogleMap.cs(20KB)
----MapWithPolygons.aspx.cs(4KB)
----App_Data()
----MapWithCustomIcons.aspx(877B)
----MapWithAutoMovingPushpins.aspx(1KB)
----Release Notes.txt(433B)
----MapWithDraggableIcons.aspx.cs(4KB)
----MapWithAutoMovingPushpins.aspx.cs(3KB)
----GoogleMapForASPNet.ascx.cs(3KB)
----GService.asmx(86B)
----MapWithPolylines.aspx(1KB)
----ControlPerformanceTest.aspx(1KB)
----Web.Config(6KB)
----MapWithMovingPushpins.aspx.cs(3KB)
----MapWithDraggableIcons.aspx(2KB)
----MapWithMovingPushpins.aspx(1KB)
----MapWithCustomIcons.aspx.cs(3KB)
----MapWithRecenter.aspx.cs(2KB)
----MapWithToolTipOnPushpins.aspx(873B)
----MapWithTrafficOverlay.aspx.cs(2KB)
----MapWithTrafficOverlay.aspx(1KB)
----Default.aspx.cs(406B)