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:

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.

Utwórz mapę

Mapy można tworzyć na dwa sposoby:

Mapa pojedynczego znacznika:Utwórz mapę na podstawie czegoś, co znalazłeś podczasbadawczy.
Mapa wieloznacznikowa:Utwórz mapę zlista wyselekcjonowana Lub zapisane wyszukiwanie.

Mapa pojedynczego znacznika

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.

Mapa wieloznacznikowa

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.

Dostosuj mapę

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

Nadaj jej nazwę, aby pamiętać, czego dotyczy mapa.
Wybierz, czy chcesz, aby użytkownik mógł poruszać się po mapie.
Ustaw wysokość mapy (w pikselach).
Wybierz, czy chcesz, aby użytkownik mógł powiększać i pomniejszać mapę.
Wybierz styl mapy pasujący do witryny, w której chcesz ją osadzić.
Wybierz kolor znacznika.
Wybierz początkową stronę karty, którą użytkownicy mają zobaczyć jako pierwszą. Domyślnie jest to natywna strona tego inwentarza.
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.
Kliknij Save przycisk, aby kontynuować.

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

Udostępnij mapę

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.

Osadzać

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

API

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

Dalsza lektura

Dowiedz się więcej o naszej kolekcjiKomponenty sieciowe.
Dowiedz się więcej oWtyczka Wink WordPress.