用C#创建一个封装Google Map API的GoogleMap Web服务器控件(一)

最近想搞两个基于Google Map的网站玩玩,觉得直接操作Google Map API实在麻烦,于是就想用C#写一个封装Google Map API的GoogleMap Web服务器控件,这样,用ASP.NET创建基于Google Map的网站就非常简单啦!

下面就让我们从头开始吧!

一. 首先打开Visual Studio 2008(其他IDE也可以),创建一个C#类库项目,命名为WindEagle.GoogleMap,勾选"创建解决方案目录"选项.

二. 删除默认的Class1.cs,修改项目属性,设置默认命名空间为"WindEagle.Web.UI.Controls".

打开AssemblyInfo.cs,作如下修改:

    using System.Reflection;

    [assembly: AssemblyTitle("WindEagle.GoogleMap")]
    [assembly: AssemblyDescription("封装Google Map API的GoogleMap ASP.NET Web服务器控件")]
    [assembly: AssemblyCompany("WindEagle")]
    [assembly: AssemblyProduct("WindEagle.GoogleMap")]
    [assembly: AssemblyCopyright("Copyright © WindEagle 2008")]

    [assembly: AssemblyVersion("2.0.0.0")]
    [assembly: AssemblyFileVersion("2.0.0.0")]

三. 在项目中添加一个ASP.NET Server Control,命名为GoogleMap.cs.

导入如下命名空间:

using System;
using System.ComponentModel;
using System.Security.Permissions;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Collections;
using System.Drawing.Design;

我们初步设计的GoogleMap控件应该有以下这些属性:

1. Height和Width, 因为Google Map的大小不能为零,且高宽比例一定,所以我决定重写继承于WebControl的Height和Width属性.

        private static readonly Unit DefaultWidth = new Unit("1200px");
        private static readonly Unit DefaultHeight = new Unit("960px");

        public override Unit Height
        ...{
            get
            ...{
                return (base.Height != Unit.Empty) ? base.Height : DefaultHeight;
            }
            set
            ...{
                base.Height = value;
            }
        }

        public override Unit Width
        ...{
            get
            ...{
                return (base.Width != Unit.Empty) ? base.Width : DefaultWidth;
            }
            set
            ...{
                base.Width = value;
            }
        }

2. Zoom, Google Map的固有属性,表示Map的显示等级.

        [
        Bindable(true),
        Category("Google"),
        DefaultValue(0),
        Description("The zoom.")
        ]
        public virtual int Zoom
        ...{
            get
            ...{
                object zoom = ViewState["Zoom"];
                return (zoom == null) ? 0 : (int)price;
            }
            set
            ...{
                ViewState["Zoom"] = value;
            }
        }

3. Latitude和Longitude, Google Map的固有属性,表示Map中心点的纬度和经度.

        [
        Bindable(true),
        Category("Google"),
        DefaultValue(0),
        Description("The latitude.")
        ]
        public virtual double Latitude
        ...{
            get
            ...{
                object latitude = ViewState["Latitude"];
                return (latitude == null) ? 0 : (double)latitude;
            }
            set
            ...{
                ViewState["Latitude"] = value;
            }
        }

        [
        Bindable(true),
        Category("Google"),
        DefaultValue(0),
        Description("The longitude.")
        ]
        public virtual double Longitude
        ...{
            get
            ...{
                object longitude = ViewState["Longitude"];
                return (longitude == null) ? 0 : (double)longitude;
            }
            set
            ...{
                ViewState["Longitude"] = value;
            }
        }

4. Address, 当没有指定Latitude和Longitude的时候,自动根据本属性查询得到Latitude和Longitude的值.

        [
        Bindable(true),
        Category("Google"),
        DefaultValue(""),
        Description("The address."),
        Localizable(true)
        ]
        public virtual string Address
        ...{
            get
            ...{
                String s = (String)ViewState["Address"];
                return (s == null) ? String.Empty : s;
            }
            set
            ...{
                ViewState["Address"] = value;
            }
        }

5. Key, 从Google那里得到的用户key.

        [
        Bindable(true),
        Category("Google"),
        DefaultValue(""),
        Description("The user key obtained from google map api.")
        ]
        public virtual string Key
        ...{
            get
            ...{
                String s = (String)ViewState["Key"];
                return (s == null) ? String.Empty : s;
            }
            set
            ...{
                ViewState["Key"] = value;
            }
        }

6. TagKey, 重写的只读TagKey属性,将Map的Tag从默认的HtmlTextWriterTag.Span改为HtmlTextWriterTag.Div.

        protected override HtmlTextWriterTag TagKey
        ...{
            get
            ...{
                return HtmlTextWriterTag.Div;
            }
        }

四. 給GoogleMap控件添加设计器,参考演练：为 Web 服务器控件创建基本控件设计器,设计器的源代码为:

using System.Web.UI.Design;

namespace WindEagle.Web.UI.Controls
{
    /**//// <summary>
    /// GoogleMap Designer
    /// </summary>
    public class GoogleMapDesigner : ControlDesigner
    {
        Properties        //////////////////////////////////////////////////////#region Properties        //////////////////////////////////////////////////////


        #endregion

        Methods           ///////////////////////////////////////////////////////#region Methods           ///////////////////////////////////////////////////////

        /**//// <summary>
        /// Get the design-time Html.
        /// </summary>
        /// <returns>The design-time Html.</returns>
        public override string GetDesignTimeHtml()
        {
            GoogleMap map = this.Component as GoogleMap;
            if (map != null)
                return string.Format("<span>Google Map points to {0}:{1} (latitude:longitude)</span>", map.Latitude, map.Longitude);
            else
                return "<span>Google Map</span>";
        }

        #endregion
    }
}

五. 修改GoogleMap的声明为:

    [AspNetHostingPermission(SecurityAction.LinkDemand, Level = AspNetHostingPermissionLevel.Minimal)]
    [ToolboxData("<{0}:GoogleMap runat=\"server\"></{0}:GoogleMap>")]
    [Designer(typeof(GoogleMapDesigner))]
    public class GoogleMap : WebControl

好了,下一篇文章中我将给GoogleMap类添加更多实用的属性.