Πώς να ενσωματώσετε έναν χάρτη κινητικότητας στον ιστότοπό σας;

Για να ενσωματώσετε έναν χάρτη κινητικότητας στον ιστότοπό σας χωρίς να δημιουργήσετε ολόκληρο το περιβάλλον, χρησιμοποιήστε ένα iframe ROOTE. Το embed μπορεί να λάβει αναζήτηση πόλης και φίλτρα προσαρμοσμένα στη σελίδα: ποδήλατα για έναν οδηγό ποδηλάτου, τουαλέτες για έναν οδηγό WC, λεωφορεία και τραμ για τις μεταφορές.

Τα παραδείγματα αυτού του οδηγού χρησιμοποιούν το embed.roote.ai, το ενσωματωμένο domain στους οδηγούς ROOTE. Η γενική τεκμηρίωση περιγράφει επίσης την ενσωμάτωση του map.roote.ai και διακρίνει τις παραμέτρους κάμερας από αυτές μιας πλήρους αναζήτησης.

Προσθήκη ευέλικτου iframe

Αυτό το μπλοκ ανοίγει μια αναζήτηση ποδηλάτου στο Μπορντό με ζουμ 15. Η διεύθυνση URL κατασκευάζεται στον κώδικα· ο τίτλος του iframe περιγράφει το περιεχόμενο για τους αναγνώστες οθόνης. Προσαρμόστε αυτόν τον τίτλο στη γλώσσα της σελίδας σας.

<iframe
  title="Carte ROOTE — vélos à Bordeaux"
  src="https://embed.roote.ai/?q=Bordeaux&amp;modes=bicycle&amp;zoom=15"
  width="100%"
  height="480"
  loading="lazy"
  allow="geolocation"
  style="display:block; width:100%; min-height:360px; border:0; border-radius:16px;"
></iframe>

Σε ένα HTML attribute, οι διαχωριστές & γράφονται &. Το πλάτος 100% ακολουθεί αυτό του κοντέινερ. Διατηρήστε ένα ύψος κατάλληλο για κινητά και αποφύγετε να θέτετε σημαντικούς χειρισμούς εκτός ορατής ζώνης.

Επιλογή τρόπων που ταιριάζουν στη σελίδα

Αυτές οι τιμές ανήκουν στη διαδρομή embed ROOTE που συνδέεται με τις οικογένειες κινητικότητας, υπηρεσιών και μεταφορών. Δεν αντικαθιστούν τις παραμέτρους REST: Υπηρεσίες χρησιμοποιεί types, ενώ Μεταφορές χρησιμοποιεί modes. Ένας χάρτης εστιασμένος σε μια πόλη δεν εγγυάται ότι κάθε οικογένεια έχει αποτελέσματα εκεί.

Διαχωρισμός κάμερας και σημείου αναζήτησης

lat και lon θέτουν την κάμερα. Δεν επαρκούν, στο τεκμηριωμένο συμβόλαιο του χάρτη, για να δημιουργήσουν αναζήτηση κοντινότητας. Για να επαναφέρετε γνωστή αναζήτηση, χρησιμοποιήστε search_lat, search_lon και search_label, μαζί με τα modes και το ζουμ.

https://embed.roote.ai/?search_lat=44.8416106&search_lon=-0.5810938&search_label=Bordeaux&zoom=15&modes=bus,tram

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

Τεκμηρίωση παραμέτρων του χάρτη ROOTE

Δημιουργία URL χωρίς απώλεια ειδικών χαρακτήρων

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

const embedUrl = new URL('https://embed.roote.ai/');
embedUrl.searchParams.set('q', 'Place des Quinconces, Bordeaux');
embedUrl.searchParams.set('modes', 'bicycle,toilets');
embedUrl.searchParams.set('zoom', '15');
document.querySelector('iframe').src = embedUrl.toString();

Διατήρηση του πλαισίου προς τον πλήρη χάρτη

Ένας σύνδεσμος προς το map.roote.ai πρέπει να ανακτήσει την τρέχουσα κατάσταση αναζήτησης αν την γνωρίζετε. Η αναδημιουργία URL χωρίς τις παραμέτρους χάνει την πόλη, τους τρόπους ή το ζουμ. Κρατήστε ένα κοινό αντικείμενο URL κατά τις ενημερώσεις από τη σελίδα σας.

const fullMapUrl = new URL('https://map.roote.ai/');
fullMapUrl.search = embedUrl.search;
const link = document.querySelector('[data-open-map]');
link.href = fullMapUrl.toString();
link.target = '_blank';
link.rel = 'noopener noreferrer';

Αυτός ο κώδικας διατηρεί τις παραμέτρους που γνωρίζει η γονική σελίδα. Αν ο χρήστης αλλάξει την αναζήτηση μέσα στο iframe, ο γονέας δεν μπορεί να διαβάσει απευθείας το URL σε άλλο domain. Για επανάκτηση αυτής της κατάστασης απαιτείται ρητά υλοποιημένος και τεκμηριωμένος μηχανισμός, όπως ανταλλαγή postMessage με έλεγχο προέλευσης. Μην εφεύρετε ονόματα γεγονότων που δεν παρέχονται από το embed.

Διαχείριση τοποθεσίας και αλληλεπιδράσεων κινητών

allow="geolocation" επιτρέπει στο iframe να ζητήσει τοποθεσία, υπό την προϋπόθεση συγκατάθεσης και πολιτικής αδειών του site. Μια άρνηση πρέπει να αφήνει την αναζήτηση πόλης λειτουργική. Μην ζητάτε τη θέση αμέσως κατά την άφιξη αν ο χρήστης δεν έχει επιλέξει αυτήν τη δράση.

Σε ένα άρθρο, η εθελοντική ενεργοποίηση του χάρτη μπορεί να αποτρέψει την υπερκάλυψη χειρονομιών από κύλιση ή ζουμ κατά την ανάγνωση. Ο έλεγχος πρέπει να παραμένει προσβάσιμος από πληκτρολόγιο και σαφώς ονομασμένος. Ελέγξτε αλλαγές κλίσης και στενό οθόνη, όχι μόνο την έκδοση για υπολογιστή.

Έλεγχος αποτελέσματος και καταστάσεων σφάλματος

Δοκιμάστε κάθε φίλτρο, μια γνωστή πόλη, μια περιοχή με λίγα δεδομένα, μια μη έγκυρη αναζήτηση και μια μη διαθέσιμη οικογένεια. Ένας χάρτης χωρίς σημαδούρα δεν δείχνει μόνος του αν η αναζήτηση είναι άδεια ή σε σφάλμα. Διατηρήστε τα μηνύματα του embed και προσβάσιμη πρόσβαση στον πλήρη χάρτη.

Διαχωρίστε το μη αποτέλεσμα από το σφάλμα API

Επιλογή μεταξύ embed, API και MCP

Παράδειγμα οδηγού για εύρεση τουαλετών

Συχνές ερωτήσεις

Πρέπει να βάλω κλειδί API στο iframe;

Οι δημόσιες διευθύνσεις URL εδώ δεν περιέχουν τέτοιο. Μην βάζετε μυστικό σε διεύθυνση embed ή κώδικα πελάτη.

Το zoom=15 αυξάνει την ακτίνα αναζήτησης;

Το ζουμ ρυθμίζει την προβολή. Μην το μπερδεύετε με την ακτίνα ενός αιτήματος API· ελέγξτε τις παραμέτρους αναζήτησης του χρησιμοποιούμενου περιβάλλοντος.

Ο γονέας γνωρίζει τις αλλαγές μέσα στο iframe;

Γνωρίζει τις παραμέτρους που μεταβιβάζει. Εσωτερικές αλλαγές απαιτούν τεκμηριωμένο μηχανισμό ανταλλαγής μεταξύ των δύο domains.