65.9K
CodeProject 正在变化。 阅读更多。
Home

ASP.NET 的 Google 地图用户控件

用户 992674
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.90/5 (91投票s)

2008年3月18日

GPL3

7分钟阅读

viewsIcon

810187

downloadIcon

16581

ASP.NET 的 Google 地图控件

引言

我们很多人都熟悉 Google 地图。Google 提供了一个非常丰富的 API，可以通过 JavaScript 在 Web 应用程序中使用。但这需要 JavaScript 知识。我不知道别人怎么样，但对我来说，在 ASP.NET Web 应用程序中使用 JavaScript 和 Google API 有点困难，特别是如果我想使用服务器端函数动态绘制 Google 地图。例如，在我的案例中，我想从 SQL Server 数据库中提取经纬度信息，然后使用它们在 Google 地图上插入图钉。所以我决定为 ASP.NET 编写 Google 地图用户控件，以处理 JavaScript 部分。

特点

  • Ajax 调用以检索服务器端数据
  • 使您能够即时更改图钉位置。无需刷新整个页面。
  • 使您能够从 ASP.NET 后端代码更改图钉图标和位置
  • ASP.NET 代码中支持图钉点击和拖动事件
  • ASP.NET 代码中支持地图点击事件
  • 支持方向。允许您在多个点之间绘制路线。
  • 支持折线和多边形
  • 支持地理编码，即从特定地址查找经纬度并在该位置创建图钉
  • 自动地图边界重置和缩放支持以显示所有图钉
  • 优化以提供最佳性能，即只从服务器检索已更改的图钉数据

如何使用

在这篇文章中，我不想解释我是如何创建这个控件的。相反，我希望您开始使用它。

要求

  • Visual Studio 2019 社区版或更高版本
  • Internet Explorer 或 Firefox（注意：它可能在其他浏览器上也能工作。我已经在 Internet Explorer 和 Firefox 上测试过。）

与 ASP.NET 应用程序集成的步骤

  • 从上面提供的 Github 链接下载或克隆源代码。
  • 在 Visual Studio 中将提取的文件夹作为网站打开并运行。当您运行此网站时，您将能够导航到一些示例页面。
  • 要在您自己的 ASP.NET 应用程序中使用此控件，请将以下子文件夹复制到您应用程序的根目录中。保持与下面所示相同的文件夹路径。这是必要的。用户控件和 JavaScript 中使用了一些相对路径。“GoogleMapControl”子文件夹包含渲染 Google 地图所需的必要 ascx 和其他文件。

Copy Source Folder

Paste Source Folder

完成后，在 Visual Studio 中打开您的解决方案并转到解决方案资源管理器。单击显示所有文件图标以显示我们刚刚复制到应用程序根目录的 GoogleMapControl 子文件夹。

Visual Studio Solution Explorer Show All Files

在包含 GoogleMapControl 子文件夹后尝试构建您的解决方案。确保没有错误。

将 Google 地图控件添加到您的网页

将“GoogleMapForASPNet.ascx”控件拖到您的网页（.aspx）文件中。

Add google map sub control to your web form (aspx) file.

此时，您可以运行您的应用程序，并且您应该能够在您的页面上看到一个空白的 Google 地图，如下所示。您将看到如下截图所示的错误。此错误是由于 Google 地图缺少 API 密钥造成的。

按照下面的教程获取您自己的 Google 地图 API 密钥。请注意，您需要在 Google Cloud Console 中拥有一个带有计费帐户的项目才能删除“仅用于开发目的”错误。您可以继续使用开发模式进行测试，而无需 API 密钥。

一旦您有了 API 密钥，请转到 Web.config 文件并在以下部分中添加

  <appSettings>
    <add key="GoogleAPIKey" value=""/>
  </appSettings>

添加 Google API 密钥后，您应该能够看到一个正常的 Google 地图，没有任何错误。

脚本管理器错误

如果您收到以下错误，则表示您的主页或您尝试添加控件的页面中已有一个脚本管理器。

一个 ScriptManager 实例只能添加到页面中。

Only one instance of ScriptManager can be added to the page.

要解决上述错误，请从 GoogleMapControlForASPNet.ascx 文件或您的页面中删除一个 Script Manager 实例。

To resolve this error, remove one instance of Script Manager from either GoogleMapControlForASPNet.ascx file or from your page.

如何使用此控件

指定地图的 width 和 height。您可以以像素为单位或以相对于其容器的百分比为单位进行指定。

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。它对于每个图钉必须是唯一的。第二个和第三个参数是 latitude 和 longitude。

GoogleMapForASPNet1.GoogleMapObject.Points.Add(new GooglePoint("1", 43.65669, -79.45278));

或者，您也可以按如下方式操作

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

您可以添加任意数量的图钉。现在再次运行网站，您应该会在地图上看到图钉。

Add pushpins

为图钉分配自定义图标

您可以使用 Google 地图控件分配您自己的图标。为此，首先将您的图标复制到您网站根目录下的某个目录中。您可以如下为图钉分配图标

GP.IconImage = "icons/pushpin-blue.png";

请注意，图像的路径是相对于根文件夹的。您的网站根文件夹中应该有图标（或任何）目录。

您可以添加图钉的描述，当用户点击图钉时会弹出。

GP.InfoHTML = "This is Pushpin-1";

Marker Popup

您可以使用标准 HTML 标签格式化 InfoHTML 属性。
例如

GP.InfoHTML = "This is Pushpin-1";

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

创建交互式地图

您可以使用 Google 地图控件创建交互式地图。您可以在用户点击按钮时移动图钉。操作方法如下：

在您的网页上插入标准的 ASP.NET 按钮。在此按钮的点击事件中编写以下代码

protected void Button1_Click(object sender, EventArgs e)
{
GoogleMapForASPNet1.GoogleMapObject.Points[“1”].Latitude += 0.003;
GoogleMapForASPNet1.GoogleMapObject.Points[“1”].Longitude += 0.003;
}

我们在这里增加了图钉 1 的 Latitude 和 Longitude 值。请注意，我正在使用图钉的 ID（在上面的代码中为“1”）来设置新的 Latitude 和 Longitude。

运行您的应用程序并点击按钮。您会注意到整个页面会刷新（或回发）。要阻止它回发，您需要用 Ajax 更新面板包装此按钮。转到 Visual Studio 工具箱，将 Ajax 更新面板控件拖到您的页面上。

Add UpdatePanel

将按钮移动到我们刚刚放置的更新面板中。

Add UpdatePanel

再次运行网站并点击按钮。您应该会注意到现在页面没有回发，并且图钉在地图上移动。

自动刷新地图和 GPS 导航

您可以像使用按钮控件一样（我上面解释过）使用 Ajax Framework 的计时器控件。在 Timer_Tick() 事件上，您可以为所有图钉指定新的经纬度。这样，地图将在指定的延迟时间后自动移动所有图钉。您可以将任何 GPS 服务与此控件连接起来以创建 GPS 导航系统。

使用 Google 地图控件创建折线

Create Polyline

为折线创建点

//Define Points for polygon
GooglePoint 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;

在点 GP1、GP2 和 GP3 之间创建折线

//Create Polygon using above points
GooglePolygon 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 polygon
PG1.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);

将折线添加到 Google 地图控件

GoogleMapForASPNet1.GoogleMapObject.Polygons.Add(PG1);

交通叠加层

要启用或禁用交通叠加层，请将以下属性设置为 true 或 false

GoogleMapForASPNet1.GoogleMapObject.ShowTraffic = true;

注意：交通叠加层可能并非在所有地区都可用。要获取有关交通叠加层的更多信息，请访问以下链接

https://developers.google.com/maps/documentation/javascript/trafficlayer

查看下载中提供的示例。我已经解释了您可能希望使用 Google 地图控件的所有场景。如果您有任何问题，请随时在这里提问。

版本历史

2021 年 9 月 12 日

  • 使用 Visual Studio 2019 社区版编译源代码
  • 已签入 Github 站点进行源代码控制

版本 1.9.3（2017 年 1 月 24 日）

此版本中进行了以下更改

  • 修复了缺失 API 密钥问题。Google 地图似乎不再允许在没有 API 密钥的情况下渲染地图。在 web.config 文件中输入 API 密钥。使用以下部分。
    <add key=”GoogleAPIKey” value=”在此处输入您的 API 密钥“/>

版本 1.9.2（2014 年 2 月 11 日）

此版本中进行了以下更改

  • 修复了方向、地图类型、图标图像和高度问题。现在可以更改方向线颜色。
  • 能够更改地图类型。现在可以设置为路线图、卫星或混合。请参阅示例 MapWithSatelliteView.aspx。
© . All rights reserved.