代码改变世界

Google静态地图-如何显示两点之间路线1(简单路线)

2012-01-17 09:50  快乐乔巴  阅读(3708)  评论(0)  编辑  收藏  举报

使用静态地图API的原因

最近公司在开发web手机这一块，我也在维护和重构原来版本的代码。项目是关于出行旅游啊，向导什么的，其中就少不了GPS功能，自然而然也会有如何去目的地的这项功能了。

这里我要特别说一下，由于现代手机的发展，我分了两类手机FeaturePhone和SmartPhone，FeaturePhone可称为非智能手机，通常指非使用Android、iPhone OS、Symbian或Windows Mobile的作业系统，却具有多媒体应用功能的手机。(–摘自百度)

那SmartPhone就是智能手机了。所以这两类都必须要对应，SmartPhone还好说，因为内嵌的web浏览器基本上都相当于PC浏览器了，比如Android和iPhone都采用的webkit引擎，什么css和javascript都支持的。但是FeaturePhone就不同了，比如说日本的三大运营商au,softbank,docomo，他们以前的非智能手机内部组建都是自行开发，浏览器什么的都很老了，旧的手机只能简单的支持一些html代码，稍微新的手机还能支持下flash等等，反正css和javascript是不能支持。

上面废话说了那么多，开始进入正题了，正如我上面所说非智能手机是不支持javascript的，所以Google Maps JavaScript API 是不能用的，那怎么办，Google还提供了静态 Google Maps API。

因为前面的版本并没有实现这个功能，所以部长也希望能实现非智能手机上显示路线这个功能，我马上阅读静态Google Maps API开发人员指南，从头到尾很认真的看完了手册上的内容，却并没有发现静态Google Maps API里有如何显示路线的，只有点与点之间划直线…(这并不是我想要的)。

Google Maps API Web Services

如果有个服务能够取到两点之间路线的各个坐标(就是道路拐点的坐标)，果不其然，Google提供了

Google Maps API Web Services服务，其中有四种服务：

Google Directions API 是一种使用 HTTP 请求计算多个位置间路线的服务。路线可以以文本字符串（如“Chicago, IL”或“Darwin, NSW, Australia”）或纬度/经度坐标的形式指定起点、目的地和路标。Google Directions API 可以使用一系列路标传回多段路线。

先看下例子：

http://maps.google.com/maps/api/directions/xml?origin=Boston,MA&destination=Concord,MA&waypoints=Charlestown,MA|Lexington,MA&sensor=false

这是马萨诸塞州波士顿和马萨诸塞州康科德之间（经过查尔斯顿和列克星敦）的路线发起一个路线请求，这是google上的例子，其中地址的参数我稍微讲解下，其实手册上都有说明的。为什么我要选择xml输出而不选择json呢，因为json要基于javascript才可以(非智能的不支持javascript)，所以只能用xml了。origin和destination都是希望根据其计算路线的地址或文本纬度/经度值。前者出发点后者到达点～～。sensor指示路线请求是否来自装有位置传感器的设备（一般是false）。

注意到origin和destination的说明没，地址或文本纬度/经度值！也就是说还可以用坐标替换地址，这正是偶想要滴～～好，那我就自行选2个点，不用上面的例子了。

http://maps.google.com/maps/api/directions/xml?origin=34.656272,133.910937&destination=34.664991,133.92084&sensor=false

上面url的两个坐标点是随便2个点，大家可以打开链接，看看xml里的构造，由于xml太长了这里就不贴代码了，具体的可以去看下官方手册。

xml中的leg节点下一排step节点就是一个个拐点(就是两点之间的路线坐标点)～，利用这些坐标相连就可以实现静态地图中两点的路线了。

我就贴下代码吧，asp.net mobile的

 1 protected void Page_Load(object sender, EventArgs e)
 2 {
 3     //开始地点(冈山站)
 4     string start = "34.665617,133.917747";
 5 
 6     //到达地点(世界遗产：后乐园)
 7     string end = "34.669429,133.933461";
 8 
 9     string url = "http://maps.google.com/maps/api/directions/xml?" +
10                  "origin=" + start +
11                  "&destination=" + end +
12                  "&sensor=false";
13 
14     XmlDocument doc = new XmlDocument();
15     doc.Load(url);
16 
17     //很有可能两个点之间没有路线，比如说海上…
18 //有路线的才会返回OK
19     if (-1 == doc.InnerXml.IndexOf("<status>OK</status>"))
20     {
21         return;
22     }
23     XmlNodeList nodes;
24     nodes = doc.SelectNodes("//leg/step");
25     string points = string.Empty;
26 
27     if (nodes.Count != 0)
28     {
29         foreach (XmlNode node in nodes)
30         {
31             string slat = node.SelectSingleNode("start_location/lat").InnerText;
32             string slng = node.SelectSingleNode("start_location/lng").InnerText;
33             string elat = node.SelectSingleNode("end_location/lat").InnerText;
34             string elng = node.SelectSingleNode("end_location/lng").InnerText;
35             points += "|" + slat + "," + slng;
36             points += "|" + elat + "," + elng;
37         }
38     }
39 
40     //将路线的坐标加起来连成路线～～
41     string imgUrl = "http://maps.google.com/maps/api/staticmap?sensor=true&size=400x400&path=color:0x0000ff|weight:5" + points;
42 
43     Response.Redirect(imgUrl);
44 }

看下效果图：

但是，url过长会有问题，篇幅问题请看下一篇Google静态地图-如何显示两点之间路线2(url过长问题)