Перейти к содержимому

Maps

Карта представляет либо одного поставщика (например, отель или поставщика впечатлений), либо инвентарь (например, тип номера, конференц-зал, спа и т. д.), либо набор инвентаря, например, курируемый список или сохраненный поиск, и отображает эти данные с помощью интерактивной карты, содержащей маркеры карты для бронирования. Пользователь может взаимодействовать с картой следующими способами:

Карта с маркерами
Карта с маркерами
  • Масштабируйте, панорамируйте и перетаскивайте карту, чтобы увидеть доступный инвентарь.
  • Нажмите на маркер карты, чтобы увидеть подробную информацию об инвентаре в видеКарточка.
Карта с открытой картой
Карта с бронируемым инвентарем

Оставшаяся часть статьи расскажет вам, как создавать, настраивать и делиться своими картами.

Карты можно создавать двумя способами:

Действия
Действия с результатами поиска

Выше представлено изображение, взятое изПоиски показывает вам некоторые из вещей, которые вы можете сделать с результатами поиска. Одно из этих действий —Make a map. Нажмите на эту кнопку, и она перенаправит вас на страницу формы карты, где вы сможете начать настраивать свою карту.

Оба тщательно отобранные списки и сохраненные поискиидут с действием, которое позволяет вам создать карту. Эта карта будет содержать маркеры карты для всего инвентаря в этих списках.

Форма позволяет вам настроить карту следующими способами:

  1. Дайте карте название, чтобы вы могли запомнить, о чем она.
  2. Выберите, хотите ли вы, чтобы пользователю было разрешено перемещаться по карте.
  3. Укажите желаемую высоту карты в пикселях.
  4. Выберите, хотите ли вы, чтобы пользователю было разрешено увеличивать и уменьшать масштаб карты.
  5. Выберите стиль карты, соответствующий веб-сайту, на который вы будете ее встраивать.
  6. Выберите цвет маркера.
  7. Выберите начальную лицевую сторону карты, которую пользователи должны видеть первой. По умолчанию это родная лицевая сторона этого инвентаря.
  8. Вы можете добавлять собственные маркеры, круги, прямоугольники и многоугольники, чтобы обозначить другие места на карте, которые могут быть интересны вашим пользователям.
  9. Нажмите на 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-content-loaderВеб-компонент и укажите ему загрузить рекламный баннер для вашего кода.
  • В строке 11 показано, как встроить наш Javascript на ваш сайт.
  • Строка 13 показывает, как встроитьwink-app-loaderВеб-компонент и укажите ему, как получить настройки конфигурации на уровне страницы.

Разработчики, желающие управлять картами, могут перейти по ссылкеРазработчики > API > Инвентарь.