制作谷歌地图的驾驶路线表现得更像实际的谷歌地图

时间:2011-06-11 08:05:00

标签: javascript google-maps google-maps-api-3

我一直在使用directionsRenderer在地图应用中进行行车路线,因此它会渲染路径(在地图上)和html路线列表。我的应用程序基本上就像这个例子:http://code.google.com/apis/maps/documentation/javascript/examples/directions-draggable.html

但是,现在我被要求让它更像Google地图上的说明,例如here

当你将鼠标悬停在html项目上时,我的客户端会想要小弹出窗口,以及显示右转,左转,合并等的小图标。

我设法从DirectionsService响应中渲染我自己的html,并挂起事件进行悬停并将它们与地图上的点相关联,但我可以使用帮助的地方是:

1)轮流转动图标。我想这并不容易,因为我将每一步都作为html文本(“从左边的433出口合并到I-80 E向Bay Bridge / Oakland”),我想可能难以合理地解析要显示的图标

2)在地图上制作小迷你弹出窗口。虽然我可以自己制作弹出窗口,但它可能具有挑战性或不可能以完全相同的方式完成,因为我没有简短版本的说明。

在任何情况下,我都认为我会检查是否有人知道这样做的方法 - 不一定完全,但只是更接近它 - 或者如果我只是因为运气不好因为谷歌没有'通过他们的api提供任何类型的功能。

1 个答案:

答案 0 :(得分:1)

你是正确的,你必须检查字符串以获得转动图标。您可以自己解析DirectionsResult对象(根据Google的文档,它是“JSON-like”),而不是如果您愿意,可以使用DirectionsRenderer,但我认为它不会给您带来任何好处。这是怎么回事:

  • DirectionsResult.route属性将是DirectionsRoute对象的数组。如果你没有将provideRouteAlternatives设置为true,那么数组中只会有一个DirectionsRoute对象。

  • 反过来,DirectionsRoute对象有一个名为legs的属性。该属性是DirectionsLeg对象的数组。如果您没有指定任何航路点(即中间目的地),只是一个起点和终点,那么该阵列中也只有一个对象。

  • DirectionsLeg对象又有一个名为steps的属性。它将是一个数组,其中每个元素都是DirectionsStep对象。

  • DirectionsStep对象有一个名为instructions的属性。这是一个字符串,你需要使用正则表达式或其他任何东西来检查,以找出要使用的转向图标。 (这可能比你提到的我想象的来自DirectionsRenderer的HTML更容易使用。或者它可能不会更容易。我不确定。我从来没有做完了。)

希望这会有所帮助,或者至少证实你的怀疑。