Przejdź do głównej zawartości

Maps

Mapa przedstawia albo pojedynczego dostawcę (np. hotel lub dostawcę doświadczeń), albo inwentarz (np. typ pokoju, salę konferencyjną, spa itp.) lub zbiór inwentarza, taki jak lista kuratorska lub zapisane wyszukiwanie, i ujawnia te szczegóły za pośrednictwem interaktywnej mapy zawierającej znaczniki mapy z możliwością rezerwacji. Użytkownik może wchodzić w interakcję z mapą w następujący sposób:

Mapa z markerami
Mapa z markerami mapy
  • Powiększaj, przesuwaj i przeciągaj mapę, aby zobaczyć dostępny asortyment.
  • Kliknij znacznik mapy, aby zobaczyć szczegóły ekwipunku w formieKarta.
Mapa z otwartą kartą
Mapa z możliwością rezerwacji zapasów

W dalszej części artykułu dowiesz się, jak tworzyć, dostosowywać i udostępniać mapy.

Mapy można tworzyć na dwa sposoby:

Akcje
Akcje wyników wyszukiwania

Powyżej znajduje się zdjęcie pobrane zSzukaji pokazuje niektóre rzeczy, które możesz zrobić z wynikami wyszukiwania. Jedną z tych czynności jestMake a map. Kliknij ten przycisk, a zostaniesz przekierowany na stronę formularza mapy, gdzie możesz rozpocząć dostosowywanie swojej mapy.

Obydwa listy redakcyjne I zapisane wyszukiwaniajest akcja, która pozwala na stworzenie mapy. Ta mapa będzie zawierać znaczniki mapy dla wszystkich przedmiotów w obrębie tych list.

Formularz umożliwia dostosowanie mapy w następujący sposób:

  1. Nadaj jej nazwę, aby pamiętać, czego dotyczy mapa.
  2. Wybierz, czy chcesz, aby użytkownik mógł poruszać się po mapie.
  3. Ustaw wysokość mapy (w pikselach).
  4. Wybierz, czy chcesz, aby użytkownik mógł powiększać i pomniejszać mapę.
  5. Wybierz styl mapy pasujący do witryny, w której chcesz ją osadzić.
  6. Wybierz kolor znacznika.
  7. Wybierz początkową stronę karty, którą użytkownicy mają zobaczyć jako pierwszą. Domyślnie jest to natywna strona tego inwentarza.
  8. Możesz dodać własne znaczniki, okręgi, prostokąty i wielokąty, aby wskazać inne lokalizacje na mapie, które mogą zainteresować Twoich użytkowników.
  9. Kliknij Save przycisk, aby kontynuować.

Po zapisaniu mapy zostaniesz przekierowany na stronę z mapami. Teraz możesz udostępnić ją światu.

Mapa
Wpis na mapie z zawiniętym menu akcji

Powyżej znajduje się obraz ze wszystkimi dostępnymi akcjami dla Twojej mapy:

  • AktualizacjaAktualizuje konfigurację mapy.
  • Dodaj do WinkLinksDodaje mapę do Twojego konta WinkLinks.
  • OsadzaćPokazuje, jak osadzić tę mapę jakoMapado Twojej witryny.
  • Użyj z WordPressemPokazuje, jak korzystać z naszegoWtyczka WordPressaby osadzić tę mapę na swojej stronie internetowej.

Niektóre z tych opcji omawiamy bardziej szczegółowo poniżej.

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

Oto jak osadzić mapę w witrynie:

  • Wiersz 3 pokazuje, jak osadzić style Wink w swojej witrynie.
  • W wierszach od 6 do 9 pokazano, jak używaćmrugnięcie-ładowacz-treściKomponent internetowy i poinstruuj go, aby pobrał baner reklamowy dla Twojego kodu.
  • Wiersz 11 pokazuje, jak osadzić nasz kod JavaScript w swojej witrynie.
  • Wiersz 13 pokazuje, jak osadzićwink-app-loaderKomponent internetowy i poinstruuj go, aby pobrał preferencje konfiguracji na poziomie strony.

Deweloperzy chcący zarządzać mapami mogą przejść doDeweloperzy > API > Inwentarz.