简介
很多人都知道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 = "<YourGoogleMapKey>"; //定义你的Google Maps API key
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);
今天先写到这里,改天继续。
分享到:
相关推荐
但是,对于我来说,在ASP.NET页面中使用JavaScript来调用Google Map的API有一定难度,尤其是利用服务器端函数来动态画出Google Map。例如,我想从SQL Server中读取经纬度信息,然后在Google Map中插入一个点。如果...
但是,对于我来说,在ASP.NET页面中使用JavaScript来调用Google Map的API有一定难度,尤其是利用服务器端函数来动态画出Google Map。例如,我想从SQL Server中读取经纬度信息,然后在Google Map中插入一个点。如果...
Google Maps Control for ASP.Net 是使用asp.net2.0 来实现 Google Maps的api 调用实现地图操作
MVC-GoogleMaps 用于在 ASP.NET MVC 页面上使用 JQuery.GoogleMaps 插件的 HtmlHelper ###What can I do with it 这是 HtmlHelper,用于渲染 GoogleMaps 进行编辑或使用查看。 图书馆提供: HtmlHelper 用于渲染查看...
本资源例子在vs2008 + sql2008下调试通过; 其中包含: 读取服务器端数据动态在googlemaps上插入mark的例子; 包含一个google suggest功能的例子;
任何 Google 地图 API 应用程序中的基础元素都是“地图”本身。本文档讨论 GMap2 基础对象的用法和地图操作的基础知识。 Google 地图的“Hello, World” 开始学习 Google 地图 API 最简单的方式是看一个简单的示例。...
谷歌地图API V3 for ASP.NET源码 源码描述: 谷歌地图提供了一种灵活的方式整合提供方向,位置信息,以及任何其它类型的东西在您的Web应用程序的谷歌地图API提供的地图。虽然有一些文章在CP解释地图, 在我的文章...
由于是在asp.net中实现,故问题演化成asp.net中javascript与后台c#如何进行交互。 C#代码与javaScript函数的相互调用主要有四个方面: 1.如何在JavaScript访问C#函数? 2.如何在JavaScript访问C#变量?
ASP.NET-C和Google-Map:ASP.NET C#和Google Map Solved页面未加载
基于jQuery的Ajax ASP.NET MVC Google Maps Web App
AsynchronousJavaScriptandXML(Ajax)最近掀起的高潮,要完全归功于Google在GoogleSuggest和GoogleMaps中的使用。对ASP.NET而言,Ajax不需要回传就能进行服务器端处理,从而使客户机(浏览器)具有丰富的服务器端能力。...
This article will guide you with a bit of knowledge about use of javascript, and more precisely will enable you to use Google Maps to your webpage with ease. Google brought web services that anyone ...
适用于ASP.NET的Google Maps控件。
使用VisualJS.NET和Google Maps的RAD MDI样式的Web应用程序示例。
电影院-ASP.NET-MVC ASP.NET MVC中的电影网站应用程序下面,我将尝试以一种简单的形式介绍该项目,但是所有代码都可以在存储库中找到。 该项目旨在扩大我在以下技术方面的知识: HTML5 CSS 引导程序带有...
有关图像操作的文章为用户提供了赢奖形式的权力
Understand new features of ASP.Net websites to enable Google/Facebook SSO based authentication and add non-obstructive validation along with embedding maps in your websites. Approach ".Net ...
为Google Maps API创建ASP.NET服务器控件包装。