Skip to content
Academy

Maps

Ένας χάρτης αντιπροσωπεύει είτε έναν μόνο προμηθευτή (π.χ. ξενοδοχείο ή πάροχο εμπειρίας) είτε ένα απόθεμα (π.χ. τύπο δωματίου, αίθουσα συσκέψεων, σπα κ.λπ.) είτε μια συλλογή αποθεμάτων, όπως μια επιμελημένη λίστα ή μια αποθηκευμένη αναζήτηση, και εμφανίζει αυτές τις λεπτομέρειες μέσω ενός διαδραστικού χάρτη που περιέχει δείκτες χάρτη με δυνατότητα κράτησης. Ένας χρήστης μπορεί να αλληλεπιδράσει με έναν χάρτη με τους ακόλουθους τρόπους:

Χάρτης με δείκτες
Χάρτης με δείκτες χάρτη
  • Κάντε ζουμ, μετατοπίστε και σύρετε τον χάρτη για να δείτε το διαθέσιμο απόθεμα.
  • Κάντε κλικ σε έναν δείκτη στον χάρτη για να δείτε λεπτομέρειες αποθέματος με τη μορφήΚάρτα.
Χάρτης με ανοιχτή κάρτα
Χάρτης με απόθεμα με δυνατότητα κράτησης

Το υπόλοιπο άρθρο σάς καθοδηγεί στον τρόπο δημιουργίας, προσαρμογής και κοινής χρήσης των χαρτών σας.

Δημιουργήστε έναν χάρτη

Section titled “Δημιουργήστε έναν χάρτη”

Οι χάρτες μπορούν να δημιουργηθούν με δύο τρόπους:

Χάρτης με έναν μόνο δείκτη

Section titled “Χάρτης με έναν μόνο δείκτη”
Ενέργειες
Ενέργειες αποτελεσμάτων αναζήτησης

Παραπάνω είναι μια εικόνα που τραβήχτηκε απόΕρευνακαι σας δείχνει μερικά από τα πράγματα που μπορείτε να κάνετε με τα αποτελέσματα αναζήτησής σας. Μία από αυτές τις ενέργειες είναιMake a map. Κάντε κλικ σε αυτό το κουμπί και θα σας ανακατευθύνει στη σελίδα φόρμας χάρτη όπου μπορείτε να ξεκινήσετε να προσαρμόζετε τον χάρτη σας.

Χάρτης πολλαπλών δεικτών

Section titled “Χάρτης πολλαπλών δεικτών”

Και τα δύοεπιμελημένες λίστεςκαιαποθηκευμένες αναζητήσειςσυνοδεύεται από μια ενέργεια που σας επιτρέπει να δημιουργήσετε έναν χάρτη. Αυτός ο χάρτης θα περιέχει δείκτες χάρτη για όλο το απόθεμα εντός αυτών των λιστών.

Προσαρμογή χάρτη

Section titled “Προσαρμογή χάρτη”

Η φόρμα σάς επιτρέπει να προσαρμόσετε τον χάρτη σας με τους εξής τρόπους:

  1. Δώστε του ένα όνομα για να θυμάστε περί τίνος πρόκειται ο χάρτης.
  2. Επιλέξτε αν θέλετε να επιτρέπεται στον χρήστη να κινείται στον χάρτη.
  3. Ορίστε το ύψος, σε pixel, που θέλετε να έχει ο χάρτης.
  4. Επιλέξτε εάν θέλετε ο χρήστης να έχει τη δυνατότητα μεγέθυνσης και σμίκρυνσης του χάρτη.
  5. Επιλέξτε ένα στυλ χάρτη που ταιριάζει με τον ιστότοπο στον οποίο θα ενσωματώσετε τον χάρτη.
  6. Επιλέξτε ένα χρώμα δείκτη.
  7. Επιλέξτε την αρχική όψη της κάρτας που θέλετε να βλέπουν πρώτα οι χρήστες. Από προεπιλογή, είναι η εγγενής όψη αυτού του αποθέματος.
  8. Μπορείτε να προσθέσετε τους δικούς σας δείκτες, κύκλους, ορθογώνια και πολύγωνα για να υποδείξετε άλλες τοποθεσίες στον χάρτη που μπορεί να βρουν ενδιαφέρουσες οι χρήστες σας.
  9. Κάντε κλικ στο Save κουμπί για να συνεχίσετε.

Αφού αποθηκεύσετε τον χάρτη σας, θα μεταφερθείτε στη σελίδα των χαρτών σας και ο χάρτης σας είναι πλέον έτοιμος για κοινή χρήση με τον κόσμο.

Κοινή χρήση χάρτη

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 σας δείχνουν πώς να χρησιμοποιήσετε τοπρόγραμμα φόρτωσης περιεχομένου-winkWeb Component και πείτε του να ανακτήσει ένα διαφημιστικό banner για τον κώδικά σας.
  • Η γραμμή 11 σας δείχνει πώς να ενσωματώσετε την Javascript μας στον ιστότοπό σας.
  • Η γραμμή 13 σας δείχνει πώς να ενσωματώσετε τοwink-app-loaderΣτοιχείο Web και πείτε του να ανακτήσει τις προτιμήσεις διαμόρφωσης σε επίπεδο σελίδας.

API

Section titled “API”

Οι προγραμματιστές που θέλουν να διαχειριστούν χάρτες μπορούν να επισκεφθούν τη διεύθυνσηΠρογραμματιστές > API > Απόθεμα.

Περαιτέρω ανάγνωση

Section titled “Περαιτέρω ανάγνωση”