使用 Waze iFrame

开发者可以在他们的网站上嵌入 Waze 实时地图。实时地图允许访问者根据 Waze 的实时地图数据搜索位置并查看实时路况动态。

您可以使用 iFrame 在网站中嵌入 Waze 实时地图，输出的内容大致如下所示：

默认情况下，实时地图会在左下角加入指向此地图的搜索和路线选项的链接。

有关其他实时地图配置选项的示例，请参阅示例。

要嵌入带 Waze 实时地图的 iFrame，请按以下步骤操作：

  1. 在文本编辑器中打开您的网页。
  2. 要在您的网页上生成 iFrame，请将您的 iFrame 代码添加到网页中。
  3. 打开 Waze 实时地图，在搜索栏中搜索您的位置，或者放大并点击地图的特定区域。
  4. 点击地图右下角的分享图标 。

  5. 弹出窗口中应会显示自定义嵌入代码。将代码复制并粘贴到网页正文中。

示例

下例展示了如何将实时地图嵌入到您的网站中。请为您的用例更新网址参数。

<iframe src="https://embed.waze.com/iframe?zoom=12&lat=45.6906304&lon=-120.810983"
  width="300" height="400"></iframe>

要将 iFrame 嵌入到自适应网站中，我们建议您根据屏幕尺寸，使用常用的 CSS 技术自动设置 iFrame 大小。

网址参数

下表介绍了 Waze iFrame 的各项参数：

参数 是否必需？ 说明
desc 可选 将此参数设置为用于在实时地图中显示描述性文本块的任何值。广播电视台使用此文本为 Wazer 提供最新信息，且无需对其电台网站进行手动更新。由 Waze 创建所有文本，确保内容正确无误。
lat 必需 地图中心点的纬度。
lon 必需 地图中心点的经度。
pin 可选

设置为 1 可将图钉放置在地图的中心。例如：

<iframe src="https://embed.waze.com/iframe?
  zoom=12&lat=45.6906304&lon=-120.810983&pin=1"
  width="300" height="400"></iframe>
zoom 必需

地图打开时采用的放大级别。

最小值为 3（最小放大率）。最大值为 17（最大放大率）。

本地化

默认语言代码为英语。如需了解详细信息，请参阅将 iFrame 本地化。

下例展示了如何更改显示语言：

<iframe src="https://embed.waze.com/fr/iframe?zoom=12&lat=45.6906304&lon=-120.810983"
  width="300" height="400"></iframe>

准则

要在您的网站上嵌入 Waze 实时地图，您必须遵守以下准则：

  • 不要以任何方式将 Waze 与所用的非 Waze 地图相关联。

  • 不要将带有 Waze 品牌元素的材料（徽标、图标等）与非 Waze 地图一起使用。

示例

下例展示了如何使用参数组合为实时地图添加不同的视觉元素：

示例 1

下面提供了一则 iframe 实现示例，其中展示了地图图钉。

纽约曼哈顿（带图钉）：

iframe 使用以下代码：

<iframe src="https://embed.waze.com/iframe?zoom=13&lat=40.78247&lon=-73.97105&pin=1"
            width="100%" height="520"></iframe>

示例 2

下面提供了一则 iframe 实现示例，其中展示了地图图钉并加入了描述性文本。

圣保罗（带图钉和描述）：

iframe 使用以下代码：

<iframe src="https://embed.waze.com/iframe?zoom=14&lat=-23.55052&lon=-46.63331&pin=1&desc=1"
            width="100%" height="520"></iframe>

示例 3

下面提供了一则 iframe 实现示例，其中展示了地图图钉。

法国巴黎（带图钉）：

iframe 使用以下代码：

<iframe src="https://embed.waze.com/iframe?zoom=13&lat=48.85661&lon=2.35222&pin=1"
            width="100%" height="520"></iframe>