static 谷歌地图 Web控件

分享于 

8分钟阅读

Web开发

  繁體 雙語

介绍

这篇文章标记了几个里程碑。 首先,它标志着我第一次尝试 C# 项目 ! ( secondly secondly secondly在不使用键( sssh )的情况下,提供了在web应用程序中查看 谷歌地图的能力。

背景

我绝对不同意在这里 endorsing。 这个控件仅仅利用了可以用于 谷歌地图的知识,并点击"查看源":-

那么我是怎么发现? 如果你去 谷歌地图,然后点击"查看源",你会注意到谷歌已经为浏览器中没有JavaScript的人提供了友好的捕获。 只需"查看源"并搜索源文件的第一次出现 <noscript> 标签,你会得到这样的东西:

<noscript><metahttp-equiv=refresh content="0; 
 URL=http://maps.google.com/?output=html"/></noscript>

这个小Fragment将浏览器重定向到 谷歌地图的"非 JavaScript"版本,这是组件工作的关键 !

它是如何工作的?

这个控件只提供基于输入的纬度。经度和缩放级别( 我相信是 in )的地图的static 视图。 没有 JavaScript,没有 DHTML。只是一个简单的简单图像标记。

在代码中定义的这里URL将生成一个映射映像:

privateconststring mapurl = "http://maps.google.com/mapdata" + 
 "?latitude_e6={0}&longitude_e6={1}&zm={2}&w={3}" + 
 "&h={4}&cc=&min_priority=2";

可以看到,我们只对所需地图图像的纬度。经度。缩放级别。宽度和高度感兴趣。 这些存储在控件的属性中。

public Unit Height
{
 get {
 objectvalue = ViewState["Height"];
 if (value == null) { returnnew Unit(400, UnitType.Pixel); }
 return (Unit)value;
 }
 set { ViewState["Height"] = value; }
}public Unit Width
{
 get {
 objectvalue = ViewState["Width"];
 if (value == null) { returnnew Unit(600, UnitType.Pixel); }
 return (Unit)value;
 }
 set { ViewState["Width"] = value; }
}public System.Int64 Latitude
{
 get {
 objectvalue = ViewState["Latitude"];
 if (value == null) { return0; }
 return (System.Int64)value;
 }
 set { ViewState["Latitude"] = value; }
}publicbool ShowControlPanel
{
 get {
 objectvalue = ViewState["ShowControlPanel"];
 if (value == null) { returntrue; }
 return (bool)value;
 }
 set { ViewState["ShowControlPanel"] = value; }
}public System.Int64 Longitude
{
 get {
 objectvalue = ViewState["Longitude"];
 if (value == null) { return0; }
 return (System.Int64)value;
 }
 set { ViewState["Longitude"] = value; }
}publicint Zoom
{
 get {
 objectvalue = ViewState["Zoom"];
 if (value == null) { return9600; }
 return (int)value;
 }
 set { ViewState["Zoom"] = value; }
}public MapZoomLevel ZoomLevel
{
 get {
 switch (this.Zoom)
 {
 case1200: return MapZoomLevel.Level0;
 case2400: return MapZoomLevel.Level1;
 case4800: return MapZoomLevel.Level2;
 case9600: return MapZoomLevel.Level3;
 case19200: return MapZoomLevel.Level4;
 case38400: return MapZoomLevel.Level5;
 case76800: return MapZoomLevel.Level6;
 case180000: return MapZoomLevel.Level7;
 case600000: return MapZoomLevel.Level8;
 case1800000: return MapZoomLevel.Level9;
 }
 return MapZoomLevel.Custom;
 }
 set {
 int zoom1 = GetZoomLevel(value);
 this.Zoom = zoom1;
 }
}publicstring ToolTipText
{
 get {
 objectvalue = ViewState["ToolTipText"];
 if (value == null) { return""; }
 return (string)value;
 }
 set {
 ViewState["ToolTipText"] = value;
 }
}

本示例 URL below 在Oxfordshire中为Wallingford生成一个映射图像。

http://maps.google.com/mapdata?latitude_e6=51600117&longitude_e6=
 4293842485&zm=9600&w=600&h=400&cc=&min_priority=2

所有控件都是格式化URL并根据开发人员传递的属性生成 IMG 标记,如下所示:

protectedoverridevoid Render(HtmlTextWriter writer)
{
 writer.AddAttribute("border", "0");
 writer.AddAttribute("cellpadding", "0");
 writer.AddAttribute("cellspacing", "0");
 writer.RenderBeginTag("table");
 writer.RenderBeginTag("tr");
 writer.RenderBeginTag("td");
 writer.AddAttribute("id", this.ClientID);
 writer.AddAttribute("width", this.Width.ToString());
 writer.AddAttribute("height", this.Height.ToString());
 writer.AddAttribute("alt", this.ToolTipText);
 writer.AddAttribute("src", string.Format(mapurl, this.Latitude, 
 this.Longitude, this.Zoom, 
 this.Width.Value, this.Height.Value));
 writer.RenderBeginTag("img");
 writer.RenderEndTag();
 writer.RenderEndTag();
 writer.RenderEndTag();
 if (this.ShowControlPanel)
 {
 writer.AddStyleAttribute("background-color","#eeeeee");
 writer.RenderBeginTag("tr");
 writer.RenderBeginTag("td");
 writer.Write("Zoom:");
 for (var i = 0; i <10; i++)
 {
 if (i == (int)ZoomLevel)
 {
 writer.AddStyleAttribute("background-color", "#0A246A");
 writer.AddStyleAttribute("color", "white");
 }
 else {
 writer.AddStyleAttribute("color", "black");
 }
 writer.AddStyleAttribute("font-size", "14px"); 
 writer.AddAttribute("href", 
 Page.ClientScript.GetPostBackClientHyperlink(this, 
 "Zoom$" + i.ToString()));
 writer.AddAttribute ("title", 
 GetZoomLevel((MapZoomLevel)i).ToString() + " Feet.");
 writer.RenderBeginTag("a");
 writer.Write("" + i.ToString() + "");
 writer.RenderEndTag();
 writer.Write("");
 }
 writer.RenderEndTag();
 writer.RenderEndTag();
 }
 writer.RenderEndTag();
}

不像保持简单 !

因此,使用我们的控件生成 上面 映射映像,我们需要做的就是在页面上使用下面的代码段:

<ctl:GoogleMapid="map1"runat="Server"Latitude="51600117"Longitude="4293842485"Zoom="9600"Width="600px"height="400px"/>

冷色 !

我知道这生成了一个简单的地图图像,但是有太多的潜力来增强这个控制。 我们可以使用鼠标来添加动态导航,只是通过调整经度和纬度来进行动态缩放。 当然,使用AJAX技术可以使这些增强变得更加容易。 如果你可以访问编码文件( 英国有一个免费的地图,可以将邮政编码区域映射到纬度/经度坐标),你可以在这里地图上查看它们。 也许在以后的文章中,我有一些时间,我将向组件添加一些增强。

我还没有在代码上做过大量的细节。 请注意代码中的任何错误,因为它是我的第一个 C# 项目 ! 而且,你可以随意下载。使用和增强组件,如你所需。

尽情享受 !


WEB  STA  控制  STAT  静态  Google地图