Maps
地图可以代表单个供应商（例如酒店或体验提供商）或库存（例如房型、会议室、水疗中心等），也可以代表库存集合（例如精选列表或已保存的搜索），并通过包含可预订地图标记的交互式地图显示这些详细信息。 用户可以通过以下方式与地图交互：
- 缩放、平移和拖动地图以查看可用库存。
- 点击地图标记即可查看库存详情卡片。
本文的其余部分将引导您了解如何创建、自定义和共享地图。
可以通过两种方式创建地图：
上面的图片取自搜索并向您展示您可以对搜索结果执行的一些操作。其中一项操作是Make a map。
单击该按钮，它将重定向到我们的地图表单页面，您可以在其中开始自定义地图。
两个都 精选列表 和 已保存的搜索附带一个操作，可让您创建地图。此地图将包含列表中所有库存的地图标记。
该表单允许您通过以下方式自定义地图：
- 给它起一个名字，以便您记住地图的内容。
- 选择是否允许用户在地图上移动。
- 设置地图的高度（以像素为单位）。
- 选择是否允许用户放大和缩小地图。
- 选择与您要嵌入地图的网站相匹配的地图样式。
- 选择标记颜色。
- 选择您希望用户首先看到的初始卡面。默认情况下，它是该库存的原生卡面。
- 您可以添加自己的标记、圆形、矩形和多边形来指示地图上用户可能感兴趣的其他位置。
- 点击
Save按钮继续。
保存地图后，您将被重定向到地图页面，现在可以与全世界分享您的地图了。
上图显示了地图上所有可用操作的图像：
- 更新更新您的地图配置。
- 添加到 WinkLinks将地图添加到您的 WinkLinks 帐户。
- 嵌入向您展示如何将此地图嵌入为地图进入您的网站。
- 与 WordPress 一起使用向您展示如何使用我们的WordPress 插件将此地图嵌入到您的网站。
下面我们将更详细地介绍其中一些选项。
<html> <head> <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link> </head> <body> <wink-content-loader layout="MAP" id="64d7cbc8-61df-11ef-9722-42004e494300" ></wink-content-loader>
<script src="https://elements.wink.travel/elements.js" type="module" defer></script>
<wink-app-loader client-id="YOUR CLIENT ID GOES HERE" configuration-id="YOUR CUSTOMIZATION ID GOES HERE" ></wink-app-loader> </body></html>以下是如何将地图嵌入到您的网站：
- 第 3 行向您展示如何将 Wink 样式嵌入到您的网站。
- 第 6 至 9 行展示了如何使用wink-内容加载器Web 组件并告诉它为您的代码获取广告横幅。
- 第 11 行向您展示如何将我们的 Javascript 嵌入到您的网站。
- 第 13 行展示了如何嵌入wink-app-loaderWeb 组件并告诉它获取您的页面级配置首选项。
想要管理地图的开发者可以前往开发人员 > API > 库存。
- 详细了解我们的收藏Web 组件。
- 详细了解Wink WordPress 插件。