让 Google 地图的行车路线表现得更像实际的 Google 地图

Question

我一直在使用方向渲染器在我的地图应用程序中进行行车路线，因此它会同时呈现路径（在地图上）和 html 路线列表。我的应用程序基本上像这个例子一样工作：http://code.google.com/apis/maps/documentation/javascript/examples/directions-draggable.html

但是，现在我被要求让它更像谷歌地图上的路线，例如here

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

我已经成功地从 DirectionsService 响应中呈现了我自己的 html，并连接了悬停事件并将它们与地图上的点相关联，但我可以使用帮助的地方是：

1. 获得轮流图标。我想这并不容易，因为我将每一步都作为 html 文本（“从左侧的 433 号出口合并到 I-80 E 向海湾大桥/奥克兰”），我想这可能很难合理解析以确定显示哪个图标

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

无论如何，我想我会检查是否有人知道做这种事情的方法 - 不一定完全准确，但更接近它 - 或者我只是运气不好，因为谷歌没有' t 通过他们的 api 提供了任何此类功能。

Answer 1

您是正确的，您必须检查字符串才能获得转弯图标。您可以自己解析 DirectionsResult 对象（根据 Google 的文档，它是“类 JSON”），而不是使用 DirectionsRenderer 如果您愿意，但我认为它不会给您带来任何好处。事情是这样的：

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

• DirectionsRoute 对象又具有一个名为legs 的属性。该属性是 DirectionsLeg 对象的数组。如果您没有指定任何航点（即中间目的地），仅指定起点和终点，那么该数组中也将只有一个对象。

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

• DirectionsStep 对象有一个称为指令的属性。那是一个字符串，您必须使用正则表达式或其他任何东西来检查以找出要使用的转向图标。 （这可能比你提到的 HTML 更容易使用，我想象它来自 DirectionsRenderer。或者它可能不会更容易。我不确定。我从来没有真正做到了。）