ASP.NET 部件 2的谷歌地图 控件

分享于 

13分钟阅读

Web开发

  繁體

介绍

这是我文章的两部分中的第二部分,谷歌地图 用户控件 ASP.NET。 在第一部分中,我已经在 ASP.NET 部分中对的谷歌地图 控件进行了说明,我已经解释了如何在 ASP.NET 应用程序中使用这个。 在本部分中,我将解释这个用户控件的代码,以便你可以对它的进行修改以供自己使用。

图表

图 上面 显示了该用户控件的工作流程。 我将逐一向你解释这个图中的每个元素。

ASPX页面与Google地图用户控件

  • 在第1部分中提到,我们需要初始化这个用户控件的一些属性以使它的工作。 这些属性在ASPX页的Page_Load() 事件中初始化。
  • protectedvoid Page_Load(object sender, EventArgs e)
    {
     //Specify API key GoogleMapForASPNet1.GoogleMapObject.APIKey = 
     ConfigurationManager.AppSettings["GoogleAPIKey"]; 
     //Specify width and height for map. GoogleMapForASPNet1.GoogleMapObject.Width = "800px"; 
     // You can also specify percentage(e.g. 80%) here GoogleMapForASPNet1.GoogleMapObject.Height = "600px";
     //Specify initial Zoom level. GoogleMapForASPNet1.GoogleMapObject.ZoomLevel = 14;
     //Specify Center Point for map.  GoogleMapForASPNet1.GoogleMapObject.CenterPoint = 
     new GooglePoint("1", 43.66619, -79.44268);
     //Add pushpins for map.//This should be done with intialization of GooglePoint class.//In constructor of GooglePoint, First argument is ID of this pushpin. //It must be unique for each pin. Type is string.//Second and third arguments are latitude and longitude. GoogleMapForASPNet1.GoogleMapObject.Points.Add(
     new GooglePoint("1", 43.65669, -79.45278));
    }
  • 初始化这些属性时,它们将存储在 GOOGLE_MAP_OBJECT 会话变量中。 稍后,GService.asmx web服务访问这个会话变量以绘制Google地图。
  • 转到 GoogleMapForASPNet.aspx.cs 文件。 检查 Page_Load() 方法。
  • protectedvoid Page_Load(object sender, EventArgs e)
    {
    . 
    . 
    . 
     if (!IsPostBack)
     {
     Session["GOOGLE_MAP_OBJECT"] = GoogleMapObject;
     }
     else {
     GoogleMapObject = (GoogleObject)Session["GOOGLE_MAP_OBJECT"];
    . 
    . 
    . 

    如你所见,如果这是页面的第一次加载,我将 GoogleMapObject 属性存储在会话变量中。 如果这是回发,那么我使用现有的会话变量值并将它的分配给 GoogleMapObject 属性。

用户控件( googlemapforaspnet。ascx )

  • GoogleMapForASPNet.ascx 文件包含一个带有 ID = GoogleMap_Div<DIV> 元素。 Google地图是在这个 <DIV> 元素上绘制
  • GoogleMapForASPNet.ascx 负责在页面加载中调用 DrawGoogleMap() JavaScript函数。 如果查看 GoogleMapForASPNet.ascx.cs 文件,它将在 Page_Load() 事件中包含以下行:
  • Page.ClientScript.RegisterStartupScript(Page.GetType(), 
     "onLoadCall", "<script language="'javascript'">" + 
     "if (window.DrawGoogleMap) { DrawGoogleMap(); } </script>");

    这将导致 DrawGoogleMap() 函数被激发。

GoogleMapAPIWrapper.js

  • 这个JavaScript充当 ASP.NET 调用和 谷歌地图 核心API函数之间的包装器。
  • 调用 DrawGoogleMap() 函数时,它调用web服务方法 GService.GetGoogleObject() 来获取会话变量值。
  • 从会话变量中检索到不同的参数后,它将开始调用 谷歌地图 核心API函数来绘制映射。

Web服务( gservice。asmx )

  • 就像我之前提到过的,GService.GetGoogleObject()GService.GetGoogleObjectOptimized() GService.asmx 文件中定义的函数。
  • 这些函数从会话变量中检索googlemaps参数。

如何定义Web服务方法

  • 这里控件使用Web服务方法从会话变量获取值。 这些方法是在 Gservice.cs ( GService.asmx 代码后面) 文件中定义的。
  • 转到 GService.cs 文件。 观察 GetGoogleObject() web方法的定义方式。
  • [__strong__][WebMethod(EnableSession = true)]public GoogleObject GetGoogleObject()
    {
     GoogleObject objGoogle = 
     (GoogleObject)System.Web.HttpContext.Current.Session["GOOGLE_MAP_OBJECT"];
     System.Web.HttpContext.Current.Session["GOOGLE_MAP_OBJECT_OLD"] = 
     new GoogleObject(objGoogle);
     return objGoogle;
    }

    将这里方法的值类型作为 GoogleObject 返回。

如何使用Web服务从JavaScript调用 ASP.NET 函数( Web服务方法)

  • 如果转到 GoogleMapForASPNet.ascx 文件的HTML源,你将看到我使用 <ScriptManagerProxy> 控件。
  • <asp:ScriptManagerProxyID="ScriptManager1"runat="server"><Services><asp:ServiceReferencePath="~/GService.asmx"/></Services></asp:ScriptManagerProxy>

    <ServiceReference><ScriptManagerProxy> 或者 <ScriptManager> 控件一起使用时,它允许你使用在后面代码中定义的Web服务方法。

  • 转到 GoogleMapAPIWrapper.js 文件。 观察我在 DrawGoogleMap() 函数中调用Web服务方法的方式。
  • function DrawGoogleMap()
    {
     if (GBrowserIsCompatible())
     {
     map = new GMap2(document.getElementById("GoogleMap_Div"));
     geocoder = new GClientGeocoder();
     GService.GetGoogleObject(fGetGoogleObject); }
    }

    GService.GetGoogleObject() 是一种web服务方法。 fGetGoogleObject() 是一个javascript函数,应该在web服务方法返回之后。

    function fGetGoogleObject(result, userContext)
    {
     map.setCenter(new GLatLng(result.CenterPoint.Latitude, 
     result.CenterPoint.Longitude), result.ZoomLevel);
     if(result.ShowMapTypesControl)
     {
     map.addControl(new GMapTypeControl());
     }
    . 
    . 
    . 

    result 是Web服务方法 GService.GetGoogleObject()的返回值。 因此,result的类型为 GoogleObject。 你可以在JavaScript中访问 result的属性以获取映射参数。

GetGoogleObject() 和 GetGoogleObjectOptimized ( ) 之间的差异

  • 这两种方法都以类似的方式。 首次加载页加载时调用 GetGoogleObject()。 它将所有的GoogleObject 属性返回到JavaScript函数。 GetGoogleObjectOptimized 在 postback 上调用。 它不返回所有属性。 相反,它返回对现有映射进行更改所需的最小属性。
  • 如果查看 GoogleMapAPIWrapper.js 文件,则在其中定义了两个函数,如下所示:
  • function endRequestHandler(sender, args)
    {
     GService.GetOptimizedGoogleObject(fGetGoogleObjectOptimized);
    }function pageLoad()
    {
     if(!Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack())
     Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);
    }

    这些函数导致 GService.GetOptimizedGoogleObject() 在AJAX调用完成时被激发。 例如假设你在 UpdatePanel 中有一个按钮。 当你点击它,它会回发页面。 当这个 postback 完成时,上面 函数将被触发。

GoogleMapAPIWrapper.js 中定义的函数

为了使本文简短,我不想解释这个文件中定义的每个函数。 相反,我将只解释重要的函数。 如果你想要更多的详细信息,这里没有解释,你可以在注释部分发布你的问题。

function CreateMarker(point,icon1,InfoHTML,bDraggable,sTitle)
{
 var marker;
 marker = new GMarker(point,{icon:icon1,draggable:bDraggable,title: sTitle});
 if(InfoHTML!='')
 {
 GEvent.addListener(marker, "click", 
 function() { this.openInfoWindowHtml(InfoHTML); });
 }
 GEvent.addListener(marker, "dragend", function() { 
 GService.SetLatLon(this.value,this.getLatLng().y,this.getLatLng().x);
 RaiseEvent('PushpinMoved',this.value); });
 return marker;
}

这里函数在Google地图上创建一个 marker。 可以看到,我在每个 marker 中添加了两个事件。 第一个是 click()。 当用户单击 marker 时,将弹出一个气球( 信息窗口)。 这是一个JavaScript事件。 第二个是 dragend()。 如果用户想要,他可以将图钉拖到新位置。 这将导致一个web方法 GService.SetLatLon() 被执行。 这里方法在会话变量中设置新的纬度和经度值。 可以看到,这个函数还调用了 RaiseEvent() 函数,该函数导致了 AJAX postback。

function RaiseEvent(pEventName,pEventValue)
{
 document.getElementById('<%=hidEventName.ClientID %>').value = pEventName;
 document.getElementById('<%=hidEventValue.ClientID %>').value = pEventValue;
 __doPostBack('UpdatePanel1','');
}

当 postback 完成时,新的纬度和经度值将从会话变量中提取。

function RecenterAndZoom(bRecenter,result)

这个功能导致了地图的中心。 它在地图上找到所有可见的标记,并根据这些标记确定中心点和缩放级别。

function CreatePolyline(points,color,width,isgeodesic)

这里函数在给定点之间创建多段线。 请参见 GoogleObject 类中的Polylines 属性。

function CreatePolygon(points,strokecolor,strokeweight, 
 strokeopacity,fillcolor,fillopacity)

这里函数在给定点之间创建多边形。 请参见 GoogleObject 类中的Polygons 属性。

如何为Google地图定义图标

  • 如果看到 fGetGoogleObject()fGetGoogleObjectOptimized() 函数的实现,你可以看到我为Google地图创建自定义图标。 这就是定义它们的方式:
  • .
    .
    myIcon_google = new GIcon(G_DEFAULT_ICON);
    markerOptions = { icon:myIcon_google };
    myIcon_google.iconSize = new GSize(result.Points[i].IconImageWidth,
     result.Points[i].IconImageHeight);
    myIcon_google.image = result.Points[i].IconImage;
    myIcon_google.shadow = result.Points[i].IconShadowImage;
    myIcon_google.shadowSize = new GSize(result.Points[i].IconShadowWidth, 
     result.Points[i].IconShadowHeight);
    myIcon_google.iconAnchor = new GPoint(result.Points[i].IconAnchor_posX, 
     result.Points[i].IconAnchor_posY);
    myIcon_google.infoWindowAnchor = new GPoint(result.Points[i].InfoWindowAnchor_posX, 
     result.Points[i].InfoWindowAnchor_posY);
    .
    .
  • 你可以为自定义 icon 设置各种属性。 下面的文章将详细介绍这些属性: 制作你自己的定制标记。

特殊便笺

我在的博客上发表了这篇文章。 以下是文章的链接: ASP.NET 谷歌地图 控件。第 2部分。


PAR  控制  asp  asp-net  Google地图