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

分享于 

14分钟阅读

Web开发

  繁體

介绍

我们大多数人都熟悉 谷歌地图。 Google提供了一个非常接近的API来在我们自己的应用程序中使用。 但是,为了使用它,我们需要一些JavaScript知识。 尽管使用 ASP.NET 页面,但在页面中使用服务器端函数来动态绘制 谷歌地图,这对于我来说是一个很难的事情。 例如我想从 SQL Server 数据库获取纬度/经度信息,然后用它在谷歌地图上插入图钉。 如果你熟悉AJAX框架,那么你就知道答案了。 你必须从JavaScript调用 ASP.NET 服务器端函数,并使用检索到的数据绘制Google地图。 那是多么简单)。 不是的,至少不是为了我。 因这里,我决定编写一个用户控件,可以负责JavaScript部件,并允许我专注于服务器端函数。

功能

  • 使你能够绘制 谷歌地图。 不需要JavaScript知识。只需在页面上拖放控件即可。
  • 使用AJAX调用检索服务器端数据。
  • 使你可以在飞行时更改图钉位置。 无需刷新完整地图。
  • 使你可以随时更改图钉图标。
  • 优化为最佳性能,换句话说,只能从已经更改的服务器中检索那些图钉数据。

如何使用

在这一部分中,我不想解释我是如何创建这个控件的。 相反,我希望你开始使用它。

要求
  • Visual Studio 2005或者更高版本
  • Microsoft框架。你可以在这里从这里下载。
  • IE 7.0或者 Mozilla Firefox 2. x. ( 请注意: 它可以在其他浏览器上工作。 我已经在 IE 和 Firefox 上进行了测试。)

要在 ASP.NET 网站中使用这些步骤,请执行以下步骤:

  • 从本页顶部提供的链接下载源代码。 将它解压缩到硬盘的某个地方。
  • 在 Visual Studio 中将解压缩的文件夹作为网站打开,然后运行它。 运行这里网站时,你将能够浏览到几个示例页面。
  • 若要在应用程序中使用这里控件,请将以下文件复制到与下面所示相同的结构中的ASP.NET 应用程序:

现在,我们将添加对AJAX库的引用。 如果你已经在应用程序中使用AJAX控件,则可以跳过以下四个步骤。

将AJAX框架添加到你的网站

  • 在解决方案资源管理器中右键单击你的网站,然后单击添加引用。
  • 在Add引用window中,选择 System.Web 和 System.Web.Extensions 库,并单击 OK OK。 请注意库版本(。在图片中,是 1.0.610 25.0 ;你可能有其他版本,你可以使用任何版本)。
  • 转到 web.config 文件,并在 <System.Web></System.Web> 元素。
  • <httpHandlers><removepath="*.asmx"verb="*"/><addpath="*.asmx"verb="*"type="System.Web.Script.Services.ScriptHandlerFactory,
     System.Web.Extensions, Version=1.0.61025.0,
     Culture=neutral,
     PublicKeyToken=31BF3856AD364E35"validate="false"/><addpath="*_AppService.axd"verb="*"type="System.Web.Script.Services.ScriptHandlerFactory,
     System.Web.Extensions, Version=1.0.61025.0,
     Culture=neutral,
     PublicKeyToken=31BF3856AD364E35"validate="false"/><addpath="ScriptResource.axd"verb="GET,HEAD"type="System.Web.Handlers.ScriptResourceHandler,
     System.Web.Extensions, Version=1.0.61025.0,
     Culture=neutral,
     PublicKeyToken=31BF3856AD364E35"validate="false"/></httpHandlers><httpModules><addname="ScriptModule"type="System.Web.Handlers.ScriptModule,
     System.Web.Extensions,
     Version=1.0.61025.0, Culture=neutral,
     PublicKeyToken=31BF3856AD364E35"/></httpModules>

    注意:确保在添加引用时,Extension库的版本与你所选择的内容相同。

将 谷歌地图 控件添加到网页

  • 打开要插入Google地图的页面。
  • 将 GoogleMapForASPNet.ascx 控件拖到页面上。
  • 你将无法在设计视图中看到 谷歌地图 控件。 相反,你应该将脚本管理器作为这里控件的一。

  • 这里时,你可以运行应用程序,你可以在页面上看到一个空白 谷歌地图 控件,如下所示:
  • 我们在地图上加几个图钉。 为此,你必须在页面的Page_Load() 事件中添加一些代码。

将参数传递给 谷歌地图 控件

  • 你必须为此组件指定 谷歌地图 API键。 你可以从谷歌的谷歌获得这项密钥。
  • if (!IsPostBack)
    {
     GoogleMapForASPNet1.GoogleMapObject.APIKey = "<YourGoogleMapKey>";

    请注意,映射的初始化代码应该是 inside 如果( IsPostBack ) ! 块。

  • 或者,可以指定要使用的谷歌地图 API的哪个版本。 你可以在这里获得关于 谷歌地图 版本的更多信息。
  • GoogleMapForASPNet1.GoogleMapObject.APIVersion = "2";
  • 指定地图的宽度和高度。 你可以像素为单位,也可以 relative 为单位指定它的容器。
  • GoogleMapForASPNet1.GoogleMapObject.Width = "800px";
    GoogleMapForASPNet1.GoogleMapObject.Height = "600px";
  • 指定缩放级别。默认值为 3。
  • GoogleMapForASPNet1.GoogleMapObject.ZoomLevel = 14;
  • 指定地图的中心点。 地图将以这一点为中心。
  • GoogleMapForASPNet1.GoogleMapObject.CenterPoint
     = new GooglePoint("CenterPoint", 43.66619, -79.44268);
  • 为地图添加图钉。 这可以通过初始化 GooglePoint 类型对象来完成。 在 GooglePoint的构造函数中,第一个参数是这个图钉的ID。 它对于每个引脚都必须是唯一的。 第二个参数和第三个参数是纬度和经度。
  • GoogleMapForASPNet1.GoogleMapObject.Points.Add(
     new GooglePoint("1", 43.65669, -79.45278));

    或者,你也可以这样做: </li/>

    GooglePoint GP = new GooglePoint();
    GP.ID = "1";
    GP.Latitude = 43.65669;
    GP.Longitude = -79.43270;
    GoogleMapForASPNet1.GoogleMapObject.Points.Add(GP);

    你可以随意添加任意数量的图钉。 现在再次运行这个网站,你应该会看到图钉在地图上。

    Google-Maps-User-Control

为图钉指定自定义图标

  • 你可以使用 谷歌地图 控件指定自己的图标。 首先,将你的图标复制到你网站 root 目录下的某个目录中。 你可以将 icon 指定给图钉,如下所示:
  • GP.IconImage = "icons/pushpin-blue.png";

    请注意,图像的路径是 relative 到 根目录的路径。 你应该在你的网站的根目录 中有一个图标 ( 或者哪一种) 目录。

  • 你可以添加图钉的描述,当用户单击图钉时,它将弹出。
  • GP.InfoHTML = "This is Pushpin-1";

  • 你可以使用标准的HTML标记格式化 InfoHTML 属性。
  • 例如:

    GP.InfoHTML = "This is <font color='red'><b>Pushpin-1</b></font>";

    到目前为止,我已经解释了使用 谷歌地图 控件的基础知识。 现在,让我们来实现一些高级功能。 我们假设当用户执行某些动作时,我们想移动图钉。 例如当用户单击按钮时。 为此,请按照以下步骤操作。

创建交互式地图

你可以使用 谷歌地图 控件创建交互式映射。 用户单击按钮时可以移动图钉。 你可以这么做。

  • 在网页上插入标准 ASP.NET 按钮。 在这里按钮的Click 事件中编写以下代码:
  • protectedvoid Button1_Click(object sender, EventArgs e)
    {
     GoogleMapForASPNet1.GoogleMapObject.Points["1"].Latitude += 0.003;
     GoogleMapForASPNet1.GoogleMapObject.Points["1"].Longitude += 0.003;
    }

    我们为这个图钉 1增加 LatitudeLongitude 值。 注意,我使用 pushpin ( 在 上面 代码中"1") 来设置新的LatitudeLongitude

  • 运行你的应用程序并单击按钮。 你会注意到整个页面都刷新了( 或者 postback )。 要停止回发,你需要用 AJAX UpdatePanel 包装这个按钮。 转到 Visual Studio 工具箱并在页面上拖动一个 AJAX UpdatePanel 控件。
  • 移动你的按钮 inside 这里 UpdatePanel
  • 现在,再次运行该网站并单击按钮。 你应该注意到页面现在没有回发,图钉在地图上移动。

自动刷新地图和 GPS 导航

你可以使用类似于按钮控件( 就像我前面解释过的)的框架控件的AJAX计时器。 在 Timer_Tick() 事件中,你可以为所有图钉指定新的纬度经度。 这样,地图将在指定的时间延迟后自动移动所有图钉。 你可以将任何 GPS 服务与这里控件钩子,以创建 GPS 导航系统。

使用 谷歌地图 控件创建多段线

  • 创建多段线的点:
  • GooglePoint GP1 = new GooglePoint();
    GP1.ID = "GP1";
    GP1.Latitude = 43.65669;
    GP1.Longitude = -79.44268;
    GP1.InfoHTML = "This is point 1";
    GoogleMapForASPNet1.GoogleMapObject.Points.Add(GP1);
    GooglePoint GP2 = new GooglePoint();
    GP2.ID = "GP2";
    GP2.Latitude = 43.66619;
    GP2.Longitude = -79.44268;
    GP2.InfoHTML = "This is point 2";
    GoogleMapForASPNet1.GoogleMapObject.Points.Add(GP2);
    GooglePoint GP3 = new GooglePoint();
    GP3.ID = "GP3";
    GP3.Latitude = 43.67689;
    GP3.Longitude = -79.43270;
    GP3.InfoHTML = "This is point 3";
    GoogleMapForASPNet1.GoogleMapObject.Points.Add(GP3);
  • 在点 GP1GP2GP3 之间创建一条多段线:
  • //Define polylineGooglePolyline PL1 = new GooglePolyline();
    PL1.ID = "PL1";//Give Hex code for line colorPL1.ColorCode = "#0000FF";//Specify width for linePL1.Width = 5;//Add pointsPL1.Points.Add(GP1);
    PL1.Points.Add(GP2);
    PL1.Points.Add(GP3);
  • 将多段线添加到 谷歌地图 控件中:
  • GoogleMapForASPNet1.GoogleMapObject.Polylines.Add(PL1);

使用 谷歌地图 控件创建多边形

  • 为多边形创建点:
  • //Define Points for polygonGooglePoint GP1 = new GooglePoint();
    GP1.ID = "GP1";
    GP1.Latitude = 43.66675;
    GP1.Longitude = -79.4042;
    GooglePoint GP2 = new GooglePoint();
    GP2.ID = "GP2";
    GP2.Latitude = 43.67072;
    GP2.Longitude = -79.38677;
    .
    .//Define GP3,GP4,GP5,GP6 and GP7 in similar way.
    GooglePoint GP7 = new GooglePoint();
    GP7.ID = "GP7";
    GP7.Latitude = 43.66656;
    GP7.Longitude = -79.40445;
  • 使用 上面 点创建多边形:
  • //Create Polygon using 上面 pointsGooglePolygon PG1 = new GooglePolygon();
    PG1.ID = "PG1";//Give Hex code for line colorPG1.FillColor = "#0000FF";
    PG1.FillOpacity = 0.4;//Stroke is outer border of polygon.PG1.StrokeColor = "#0000FF";
    PG1.StrokeOpacity = 1;
    PG1.StrokeWeight = 2;//Add points to polygonPG1.Points.Add(GP1);
    PG1.Points.Add(GP2);
    PG1.Points.Add(GP3);
    PG1.Points.Add(GP4);
    PG1.Points.Add(GP5);
    PG1.Points.Add(GP6);
    PG1.Points.Add(GP7);
  • 将多边形添加到 谷歌地图 控件中:
  • GoogleMapForASPNet1.GoogleMapObject.Polygons.Add(PG1);

浏览下载中提供的示例。 我解释了你可能希望使用 谷歌地图 控件的各种情况。 如果您有任何问题, 随意问.

在第1部分,我将向你解释用户控件的源代码,以及如何为自己的用户定制它。

历史记录

1.2 版

我发布这里控件的新版本。 这里版本中已经完成以下更改:

  • 一个与多边形相关的小 Bug 是固定的。
  • 现在,你可以启用或者禁用通信覆盖。

版本 1.1

这里版本中添加了以下功能:

  • 现在,你可以使用这里控件绘制多段线和多边形。
  • 新的属性 GoogleMapObject.APIVersion 已经添加到这里控件中。 这将允许用户使用任何版本的谷歌地图 API。 默认版本为 2.

PAR  控制  asp  asp-net  Google地图  
相关文章