AJAX 启用的 Google Maps ASP.NET 控件

• 下载源代码 - 44.2 KB

引言

Google Maps API 可能是目前使用最广泛的（基于网络的）地图 API。基本上，它提供了一个 JavaScript 接口，可以在任何平台上使用。因此，具备基本的 JavaScript 知识就足以使用和处理此 API。但是，那些不熟悉处理 JavaScript（或通常的客户端脚本）的人也倾向于使用和处理提供目标功能的组件和对象。就将此 API 用于某些网页而言，我认为创建可以在服务器端处理的 Web 控件更为合适。因此，我实现了一个拖放样式的 [ASP.NET web] 控件。使用 VS2005 [和 .NET 2.0] 作为开发平台，但 -当然- 该控件可以在较新的平台上使用。

背景

此处实现的控件是一个经典的拖放样式 ASP.NET Web 控件，因此它不需要任何 JavaScript 处理和知识。对使用 ASP.NET 有一些基本了解就足够了。

基本代码示例

当控件放置在页面上时，将创建如下代码片段

<cc1:googlemap id="GoogleMap1"  runat="server"/>

设置 Latitude 和 Longitude 属性的方法如下

GoogleMap1.MapInfo.Latitude = 41.0191048232402;
GoogleMap1.MapInfo.Longtitude = 28.997393828418;

设置缩放级别和地图类型类似

GoogleMap1.MapInfo.Zoom = 12;
GoogleMap1.MapInfo.MapType = MapTypes.ROADMAP;

添加标记也很容易

Marker mNew = new Marker();
        
//required properties:
mNew.MarkerId = Guid.NewGuid().ToString();
mNew.Latitude = 41.0023;
mNew.Longtitude = 28.9921;

//optional properties:
mNew.ImgSrc = "images/marker1.ico"; //or http://someurl.com/images/image1.jpg;
mNew.Draggable = false;
mNew.InfoWindowOnClick = true;
mNew.InfoWindowContentHtml = "here contains info window content html..";
mNew.Tooltip = "Istanbul";

GoogleMap1.Markers.Add(mNew);

在这里，GoogleMap1.Markers 是用于获取服务器端添加的标记列表的访问器。

使用以下声明也可以通过延迟时间遍历某些位置的标记

public void PlayRouteMap(List<position> Positions, int MoveInterval, Marker PositionMarker)

第一个参数是要遍历的位置列表，第二个是延迟时间，最后一个是遍历位置的标记。

检测地图事件

服务器端也提供了检测地图事件的功能 [通过标准事件结构]。例如，将以下代码附加到 Page_Load 将提供在服务器端捕获地图点击事件的功能

GoogleMap1.MapClicked += new MapClickedEventHandler(GoogleMap1_MapClicked);

通过以下代码片段可以在地图上点击的位置添加标记

void GoogleMap1_MapClicked(double Latitude, double Longtitude)
{
    Marker m = new Marker(Guid.NewGuid().ToString(), Latitude, 
                   Longtitude, "images/marker1.ico");
    GoogleMap1.Markers.Add(m);
}

所有支持的事件如下所示

public event MapCenterChangedEventHandler MapCenterChanged;
public event ZoomChangedEventHandler ZoomChanged;
public event MapTypeChangedEventHandler MapTypeChanged;
public event MapClickedEventHandler MapClicked;

将控件添加到工具箱并使用它

打开工具箱（在 ASPX 和 ASCX 页面上）；然后在 "常规" 节点上，右键单击并选择 "选择项目..."。在打开的对话框页面中，单击 "浏览..."，然后查找并选择 "GoogleMap.dll"。之后，控件将放置在工具箱中，并准备好进行拖放。此外，必须将 GoogleMap.js 放置在站点目录或其路径分配给 GoogleMap 控件的 JsFilePath 属性的目录中。

控件结构

控件 GoogleMap 实现了 ICallbackEventHandler 接口，该接口使客户端和服务器端能够在没有回发的情况下相互通信。在回调过程中，服务器端方法 RaiseCallbackEvent 会被调用，其中包含客户端参数。在此方法中，客户端参数将被解析和处理，然后生成一个结果字符串，以便在客户端解析和处理。在客户端，将调用预定义的 JavaScript 方法 HandleCallBackResponse 以处理参数数据。这就是控件的基本结构，它具有标准的回调结构。有关详细信息，"ASP.NET 回调" 是要搜索的关键字。

历史

• 2010.07.12 - 更新将在 CodePlex 上提供：http://googlemapcontrol.codeplex.com。