使用 Google Maps JavaScript API 绘制路径
4.67/5 (8投票s)
本文介绍了如何使用经纬度点数组在 Google 地图上绘制路径。
引言
我一直在寻找一些从数据库中提取 Google 坐标（经度和纬度）并在我的 Google 地图上绘制相应路径的代码。因此，我研究了 Google Maps JavaScript API 并实现了一个函数，该函数从 ASP.NET 数据表中读取 GPS 坐标，并在 page_load 事件上绘制路径。
背景
您可以 参考这篇文章 了解有关 Google Maps JavaScript API 中每个函数的基本信息。
Using the Code
我能够使用 Google JavaScript API 函数之一轻松地绘制出仅两个坐标之间的路径。 CodeProject 上有很多文章让我很好地了解了 Google Maps JavaScript API 的工作原理。但是，我没有找到任何文章从数据库或数据表中提取一系列坐标并在运行时绘制连续路径。我将分步骤解释如何执行此操作，如下所示
步骤 - 1
创建一个 Default.aspx 页面，内容如下
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
Inherits="_Default" %>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Plot Path Demo Using Google Maps JavaScript API v3</title>
<link
href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css"
rel="stylesheet" type="text/css" />
<!--Google API Javascript Reference-->
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<!--Literal Control for runtime javascript-->
<asp:Literal ID="js" runat="server"></asp:Literal>
</head>
<body onload="initialize()">
<form id="form1" runat="server">
<!--Canvas for showing the google map-->
<div id="map_canvas" style="width: 100%; height: 100%;"></div>
</form>
</body>
</html>
让我在这里简要解释一下 Google Maps JavaScript API 的工作原理。首先，我们在 head 标签中添加 Google API JavaScript 引用
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
然后，您在页面上放置一个块级元素（如 div ），您希望在其中显示地图
<div id="map_canvas" style="width: 100%; height: 100%;"></div>
接下来，在 html body 标签的 onload 事件上添加一个 JavaScript 函数，如下所示
<body onload="initialize()">
步骤 - 2
在 App_Code 目录中创建一个类 GPSLib.cs 并创建以下函数。我已将该函数和相应的类 (GPSLib) 声明为 static ，因此无需创建任何对象即可直接访问它。
public static String PlotGPSPoints(DataTable tblPoints)
{
try
{
String Locations = "";
String sJScript = "";
int i = 0;
foreach (DataRow r in tblPoints.Rows)
{
// bypass empty rows
if (r["latitude"].ToString().Trim().Length == 0)
continue;
string Latitude = r["latitude"].ToString();
string Longitude = r["longitude"].ToString();
// create a line of JavaScript for marker on map for this record
Locations += Environment.NewLine + @"
path.push(new google.maps.LatLng(" + Latitude + ", " + Longitude + @"));
var marker" + i.ToString() + @" = new google.maps.Marker({
position: new google.maps.LatLng
(" + Latitude + ", " + Longitude + @"),
title: '#' + path.getLength(),
map: map
});";
i++;
}
// construct the final script
sJScript = @"<script type="text/javascript">
var poly;
var map;
function initialize() {
var cmloc = new google.maps.LatLng
(33.779005, -118.178985);
var myOptions = {
zoom: 11,
center: cmloc,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map
(document.getElementById('map_canvas'), myOptions);
var polyOptions = {
strokeColor: 'blue',
strokeOpacity: 0.5,
strokeWeight: 3
}
poly = new google.maps.Polyline(polyOptions);
poly.setMap(map);
var path = poly.getPath();
" + Locations + @"
}
</script>";
return sJScript;
}
catch (Exception ex)
{
throw ex;
}
}
在上面的代码中，我们将生成创建地图以及绘图所需的 JavaScript 代码。上面的函数 PlotGPSPoints() 将返回一个 string 对象，其中包含相应的 JavaScript 代码。您可以在 这里 找到有关此脚本如何工作的更多信息。
我正在从 datatable 逐行读取值（latitude, longitude）在 for 循环中，并创建一个 'Locations' string，它只是 JavaScript 代码。此代码将嵌入到 initialize() 函数中。
步骤 - 3
将代码添加到 Default.aspx 页面的 page_load 事件中，以使用函数 PlotGPSPoints() 显示绘制的路径。我手动创建了一个 DataTable ，其中包含 2 列 Latitude 和 Longitude ，并添加了 3 行并将其传递以如下绘制路径
if (!IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.Add(new DataColumn("Latitude"));
dt.Columns.Add(new DataColumn("Longitude"));
DataRow row = dt.NewRow();
row["Latitude"] = 33.779005;
row["Longitude"] = -118.178985;
dt.Rows.Add(row);
row = dt.NewRow();
row["Latitude"] = 33.879005;
row["Longitude"] = -118.098985;
dt.Rows.Add(row);
row = dt.NewRow();
row["Latitude"] = 33.979005;
row["Longitude"] = -118.218985;
dt.Rows.Add(row);
js.Text = GPSLib.PlotGPSPoints(dt); ;
}
}
您可以从数据库中将坐标提取到 datatable 中，其中包含 2 列 latitude 和 longitude ，并将其作为参数传递给 GPSLib.PlotGPSPoints() 函数。其余的将自动处理。
关注点
如果您在 Web 应用程序中并尝试在 App_Code 文件夹中添加一个新类，则在将 Build Action 属性的值设置为“Compile”而不是“Content”之前，将无法访问它。为此，请选择该类并按 F4 查看其属性。
历史
- GPSLib v1.1