Lat铺设平面零件 1: 一个 谷歌地图. NET 控件

分享于 

16分钟阅读

Web开发

  繁體 雙語

介绍

这是三篇文章系列文章中的第一篇文章,研究了开发定制 ASP.NET 服务器控件,以使使用 谷歌地图 API更容易。 NET开发者。 本文假设你对 谷歌地图 ( 或者至少有些好奇) 有些熟悉。 如果你不熟悉 谷歌地图 或者它的sweet checkout checkout这个站点和,那么这个站点low低。 你可能会在文章中看到关于"我的控件,GoogleMaps控件,我的GMap控件,等等"的引用。 我没有创建 谷歌地图 API,我只是使用 C#。XML和XSL创建了 ASP.NET的包装器。

通常我的第一篇文章将着重于创建。 但实际上不需要了解控件是如何开始使用它的。 我真的希望获得关于这个控制的反馈,而不是让你坐在这个"创建"文章中。

就像我说的,我的主要目标是让使用语言使用谷歌地图变得容易。 我也尝试过在创建这个控件时不使用任何花哨或者专有的"黑客攻击"或者解决方法。

设置和配置

我需要指出一些快速的事情,然后才能得到这些示例。 文档为Google页面的DOCTYPE。HTML名称空间和样式做了一些特定的推荐。 每个示例页都以如下方式开始:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""<Ahref="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</A>"><htmlxmlns="<A href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</A>" 
 xmlns:v="urn:schemas-microsoft-com:vml"><head><metahttp-equiv="content-type"content="text/html; charset=UTF-8"/><title>... </title><styletype="text/css"> v:* 
 {
 behavior:url(#default#VML); }
 </style>. . . </head>

请注意"严格" DOCTYPE,该属性中的自定义 xmlns 属性 HTML 标签,以及 v:*的神秘的样式表条目。 如果你不在页面中包含这些值,则可能会发生奇怪的事情。 我特别注意到在 IE 中使用多段线时。

Google API密钥

你将需要一个有效的Google键( 这里有一个 。) 来运行示例。 只要应用程序位于 http://localhost/TestWeb/. 中,可以下载代码(。查看 Web.Config 文件) 中包含的键就会工作

Web.Config 设置

GMap 控件基于" div "tag遗憾的是,ASP.NET 呈现 div 默认情况下,标签控件作为非浏览器中的表。 为了使控件在 Firefox 中正确呈现,需要将以下条目添加到 Web.Config 或者 machine.config file: 中

<browserCaps><casematch="^Mozilla/5.0s*([^)]*))s*(Gecko/d+)s*Firefox/
 (?'version'(?'major'd+)(?'minor'.d+)(?'letters'w*)).*"> type=Firefox/${version}
 version=${version}
 majorversion=${major}
 minorversion=${minor}
 frames=true
 tables=true
 cookies=true
 javascript=true
 javaapplets=true
 ecmascriptversion=1.5
 w3cdomversion=1.0
 css1=true
 css2=true
 xml=true
 tagwriter=System.Web.UI.HtmlTextWriter
 <filtermatch="^b"with="${letters}"> beta=true
 </filter></case></browserCaps>

通常,将这些值添加到web服务器上的machine.config 文件中是个好主意。 为什么像 asp:panel 之类的东西"? div "控件将在 Firefox 中正确呈现。

好东西

downloadable ( 请参阅上面的下载源文件)的代码包括一个叫做TestWeb的web项目,其中包含了关于如何在应用程序的( 请参见这里的所有示例 。) 中使用 GMap 控件的nine ( 9 ) 示例页。 下载包括完整的控制源,我将在本系列文章的第2部分中详细介绍。

Basics.aspx

__Show Me__ 这是对 GMap 最简单的使用。 这里我们只创建一个宽度为 500px,高度为 300像素的GMap。 更简单的?

<formid="Form1"method="post"runat="server"><wcp:GMaprunat="server"id="gMap"Width="500px"Height="300px"/></form>
Basics.aspx. cs

要初始化映射,你总是希望对 CenterAndZoom 进行调用。 否则,你可能会得到一个大灰色的盒子。

protected GMap gMap;privatevoid Page_Load(object sender, System.EventArgs e)
{
 gMap.CenterAndZoom(new GPoint(-122.141944F, 37.441944F), 4);
}

休士顿,我们有 GMap

Controls.aspx.cs

__Show Me__ 控件的. aspx 代码与基本示例相同。 在这里,我们将一些基本控件添加到地图:

protected GMap gMap;privatevoid Page_Load(object sender, 
 System.EventArgs e)
{
 gMap.AddControl( new GSmallMapControl());
 gMap.AddControl( new GMapTypeControl());
 gMap.CenterAndZoom(new GPoint(-122.141944F, 
 37.441944F), 4);
}

GMap和GMarker事件

现在假设你想挖掘 谷歌地图 API提供的一些事件。 你可以通过在页面中实现适当的JavaScript函数来访问任何 GMap 事件。 事件概述为 below,并在以下示例中演示:

事件处理器便笺
GMap_Click(overlay, point)"this将引用被单击的GMap
GMap_Move()"this将引用移动的GMap
GMap_MoveStart()"this将引用移动的GMap
GMap_MoveEnd()"this将引用已经移动的GMap
GMap_Zoom(oldZoomLevel, newZoomLevel)"this将引用缩放的GMap
GMap_WindowOpen()
GMap_WindowClose()
GMap_AddOverlay(overlay)"this将引用添加了覆盖的GMap
GMap_RemoveOverlay(overlay)"this将引用丢失覆盖的GMap
GMap_ClearOverlays()"this将引用清除的GMap
GMarker_Click()"this将引用已经单击的GMarker
GMarker_InfoWindowOpen()
GMarker_InfoWindowClose()

Listeners.aspx

__Show Me__

<scripttype="text/javascript">function GMap_MoveEnd()
 {
 var center = this.getCenterLatLng();
 var latLngStr = 
 '(' + center.y + ', ' + center.x + ')';
 document.getElementById('message').innerHTML = 
 latLngStr;
 }</script></head><body><formid="Form1"method="post"runat="server"><wcp:GMaprunat="server"id="gMap"Width="500px"Height="300px"/><asp:LabelRunat="server"ID="message"/></form></body>

这里我们实现了一个 GMap JavaScript事件函数,GMap_MoveEnd。 当用户停止用鼠标移动 GMap 时,这里函数将运行。 JavaScript代码获取地图( 这个)的当前 center 坐标,格式化这些值并将它们显示在"邮件"标签中。

InfoWindow.aspx.cs

这里示例打开GMap信息Window窗口并显示。 注意这个例子使用JavaScript来创建一个新的DOM文本节点。 GMap 还支持 OpenInfoWindowHtml,它接受一串HTML以在信息窗口中显示。

protected GMap gMap;privatevoid Page_Load(object sender, 
 System.EventArgs e)
{
 GPoint gp = new GPoint(-122.141944F, 37.441944F);
 gMap.CenterAndZoom(gp, 4);
 gMap.OpenInfoWindow(gp, 
 "document.createTextNode('Hello World')");
}

Overlays.aspx.cs

__Show Me__: 没有注释或者线条注释的地图是什么有趣的? 可以编程方式向 GMap 添加"覆盖"。 目前,谷歌地图 API提供的惟一两个覆盖是 GMarkerGPolyline。 这里示例演示两种方法的用法:

protected GMap gMap;privatevoid Page_Load(object sender, System.EventArgs e)
{ 
 gMap.AddControl(new GSmallMapControl());
 gMap.AddControl(new GMapTypeControl());
 GPoint gp = new GPoint(-122.141944F, 37.441944F);
 gMap.CenterAndZoom(gp, 5);
 GMarker gm = new GMarker(gp, "FirstMarker");
 gMap.Overlays.Add(gm);
 GPolyline gPoly = new GPolyline();
 gPoly.Weight = 5;
 gPoly.Opacity = 0.25F;
 gPoly.Color = Color.Red;
 for( int i=1; i<6; i++ )
 {
 float x = gp.X + (0.005F*-i);
 float y = gp.Y + (0.005F*-i);
 gPoly.Points.Add(new GPoint(x, y));
 }
 gMap.Overlays.Add(gPoly);
}

ClickHandling.aspx

如果需要,还可以捕获 GMap click事件,并根据单击执行任何需要的操作,如添加或者删除叠加:

<scripttype="text/javascript">function GMap_Click(overlay, point)
 {
 if( overlay )
 this.removeOverlay(overlay);
 elseif( point )
 this.addOverlay(new GMarker(point));
 }</script></head><body><formid="Form1"method="post"runat="server"><wcp:GMaprunat="server"id="gMap"Width="500px"Height="300px"/></form></body>

MarkerInfoWindow.aspx

如果你想要使用任何 HTML,你也可以在 marker 中捕获一个信息窗口:

<scripttype="text/javascript">function GMarker_Click()
 {
 var html = "<b>" + this.id + "</b>";
 this.openInfoWindowHtml(html);
 }</script></head><body><formid="Form1"method="post"runat="server"><wcp:GMaprunat="server"id="gMap"Width="500px"Height="300px"/></form></body>
MarkerInfoWindow.aspx. cs

使用任何. NET 语言以编程方式创建 GMarker。 设置每个 GMarker Id,以便在单击时将它的显示在客户端。

protected GMap gMap;privatevoid Page_Load(object sender, System.EventArgs e)
{
 GPoint gp = new GPoint(-122.141944F, 37.441944F);
 GMarker gm = new GMarker(gp, "FirstMarker");
 gMap.Overlays.Add(gm);
 gm = new GMarker(new GPoint(gp.X + 0.005F, 
 gp.Y + 0.005F), "SecondMarker");
 gMap.Overlays.Add(gm);
 gMap.CenterAndZoom(gp, 4);
}

Icons.aspx

__Show Me__GMap 控件还支持自定义图标。 除非你有足够的图像访问权限,否则创建图标需要更多的工作。 我们将借用一些谷歌演示的目的。

<scripttype="text/javascript">function GMarker_Click()
 {
 var html = "You clicked me!";
 this.openInfoWindowHtml(html);
 }</script></head><body><formid="Form1"method="post"runat="server"><wcp:GMaprunat="server"id="gMap"Width="500px"Height="300px"/></form></body>
Icons.aspx. cs

同样,这里的主题是通过编程方式创建Google对象并使用 C#/VB.NET. 与它们交互

protected GMap gMap;privatevoid Page_Load(object sender, System.EventArgs e)
{
 GPoint gp = new GPoint(-122.141944F, 37.441944F);
 GIcon tiny = new GIcon();
 tiny.Id = "tiny";
 tiny.Image = new Uri(
 "http://labs.google.com/ridefinder/images/mm_20_red.png");
 tiny.Shadow = new Uri(
 "http://labs.google.com/ridefinder/images/mm_20_shadow.png");
 tiny.IconSize = new GSize(12, 20);
 tiny.ShadowSize = new GSize(22, 20);
 tiny.IconAnchor = new GPoint(6, 20);
 tiny.InfoWindowAnchor = new GPoint(5, 1);
 gMap.Icons.Add(tiny);
 gMap.AddControl(new GSmallMapControl());
 gMap.AddControl(new GMapTypeControl());
 gMap.CenterAndZoom(gp, 4);
 GMarker gm = new GMarker(gp, "TinyMarker", tiny.Id);
 gMap.Overlays.Add(gm);
}

DataListExample.aspx

这是我想在本文中介绍的示例。 我想演示一下创建多个 GMap 控件的容易程度。 本示例创建六个以不同的缩放级别分别位于同一点的( 6 ) 贴图。

<body><formid="Form1"method="post"runat="server"><asp:DataListRunat="server"ID="dlMaps"RepeatDirection="Horizontal"RepeatColumns="2"RepeatLayout="Table"><ItemTemplate><wcp:GMaprunat="server"ID="gMap"width="400px"height="240px"/><asp:LabelRunat="server"> Location: (-122.141944, 37.441944) Zoom Level:
 <%# Container.DataItem %></asp:Label></ItemTemplate></asp:DataList></form></body>
DataListExample.aspx. cs

在这里我们通过创建缩放值的ArrayList 来获得一些效果。 这里 ArrayList 用作我们的DataListDataSource。 在数据绑定期间,我们得到每个 GMap的引用,并在给定的点中将它的放大并缩小一步。

protected DataList dlMaps;privateconstint MAX_ZOOM = 6;privatevoid Page_Load(object sender, 
 System.EventArgs e)
{
 ArrayList al = new ArrayList();
 for( int i=1; i<=MAX_ZOOM; i++ )
 al.Add(i);
 dlMaps.DataSource = al;
 dlMaps.DataBind();
}privatevoid dlMaps_ItemDataBound(object s, 
 DataListItemEventArgs dliea)
{
 GMap map = (GMap)dliea.Item.Controls[0];
 int zoom = Convert.ToInt32(dliea.Item.DataItem);
 map.CenterAndZoom(new GPoint(-122.141944F, 
 37.441944F), zoom);
}

结束语

在本文中,我们介绍了. NET GMap 控件的基本用法。 我认为更高级的特性会更高级,这将在本系列文章的第2部分中介绍。 下面是一些景点的预览:

  • 覆盖数据绑定- 将数据库纬度/lng值直接绑定到 GMap
  • 客户端调用- 运行服务器端代码作为客户端 GMap 事件的结果。
  • GMap postback 状态- 在 postback 后获取有关你的GMap的一些数据。

在第1部分,我将讨论如何设计 GMap 控件以及一些设计决策的原因。


PAR  控制  FLA  FLAT  Google地图  
相关文章