跳转到内容
Academy

地图

地图表示单个供应商（例如酒店或体验提供商）、库存（即房型、会议室、水疗等）或库存集合（如策划列表或保存的搜索），并通过包含可预订地图标记的交互式地图展示这些详情。 用户可以通过以下方式与地图互动：

带标记的地图
带地图标记的地图
  • 缩放、平移和拖动地图以查看可用库存。
  • 点击地图标记以查看以卡片形式展示的库存详情。
打开卡片的地图
带可预订库存的地图

本文余下部分将指导您如何创建、定制和分享您的地图。

创建地图

Section titled “创建地图”

地图可以通过两种方式创建：

单标记地图

Section titled “单标记地图”
操作
搜索结果操作

上图取自搜索，展示了您可以对搜索结果执行的一些操作。其中一个操作是制作地图。 点击该按钮后，您将被重定向到我们的地图表单页面，开始定制您的地图。

多标记地图

Section titled “多标记地图”

策划列表和保存的搜索都带有一个操作，允许您创建地图。该地图将包含列表中所有库存的地图标记。

定制地图

Section titled “定制地图”

表单允许您通过以下方式定制地图：

  1. 给地图命名，方便您记住地图内容。
  2. 选择是否允许用户在地图上移动。
  3. 设置地图的高度（像素）。
  4. 选择是否允许用户缩放地图。
  5. 选择与您将嵌入地图的网站风格相匹配的地图样式。
  6. 选择标记颜色。
  7. 选择用户首次看到的初始卡片面。默认是该库存的原生面。
  8. 您可以添加自己的标记、圆形、矩形和多边形，以标示地图上用户可能感兴趣的其他位置。
  9. 点击保存按钮继续。

保存地图后，您将被重定向到地图页面，您的地图即可与全世界分享。

分享地图

Section titled “分享地图”
地图
带折叠操作菜单的地图条目

上图展示了地图的所有可用操作：

  • 更新 更新您的地图配置。
  • 添加到 WinkLinks 将地图添加到您的 WinkLinks 账户。
  • 嵌入 向您展示如何将此地图作为地图嵌入您的网站。
  • 与 WordPress 一起使用 向您展示如何使用我们的WordPress 插件将此地图嵌入您的网站。

下面我们将更详细地介绍其中一些选项。

嵌入

Section titled “嵌入”
<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-content-loader Web 组件，并告诉它获取您的代码的广告横幅。
  • 第11行展示了如何将我们的 Javascript 嵌入您的网站。
  • 第13行展示了如何嵌入wink-app-loader Web 组件，并告诉它获取您的页面级配置偏好。

API

Section titled “API”

想要管理地图的开发者可以访问开发者 > API > 库存。

进一步阅读

Section titled “进一步阅读”