在地图上显示 Google 的“路线”框答案

【问题标题】：Displaying Google's 'directions' box on a map在地图上显示 Google 的“路线”框
【发布时间】：2010-08-09 00:20:17
【问题描述】：

我正在网站上实施 Google 地图。

其中一项要求是显示一个方向框，其中包含与 Google 地图使用的字段相同的字段，并且会在用户单击按钮时弹出。

我知道 Google Maps API 允许您在两个不同的位置之间画一条线。

是否可以使用 API 来显示方向框本身，而不是自己编写方向框？

请注意：我指的是初始路线表格 - 即您输入“A”和“B”目的地并点击“获取”的表格方向”。

【问题讨论】：

标签： javascript user-interface google-maps directions

【解决方案1】：

是的，DirectionsRenderer 可以自动渲染“方向框”。只需在您的 HTML 中创建一个<div id="dir_box">，然后通过setPanel() 方法将其传递给您的DirectionsRenderer 对象：

directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('dir_box'));

查看 Google Maps API 教程中的 this example 以获取基本示例：

【讨论】：

您好丹尼尔，感谢您的努力。不幸的是，这似乎是一个非常简单的渲染——它甚至不包括“旅行模式”图标（例如汽车、步行、公共汽车）。由于它与 Google UI 几乎没有相似之处，我不妨自己编写元素并应用我自己的样式。我希望避免这种努力，但我想我不能。
@jonathanconway：是的，API 提供了您自己构建的一切。但是请注意，您仍然可以使用 CSS 样式设置该面板的样式。 Google 用来呈现该表格的 CSS 类看起来非常系统，而且我认为基本样式使用 CSS 是实用的。
这就是我自己做的原因。自己编写简单的 HTML 并设置样式会更快，浪费时间在 Google 的杂乱标记上有何意义？