使用 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>