Σχηματοποίηση σημείων Javascript για τους Χάρτες Google - 💡 Fix My Ideas

Σχηματοποίηση σημείων Javascript για τους Χάρτες Google

Σχηματοποίηση σημείων Javascript για τους Χάρτες Google


Συγγραφέας: Ethan Holmes, 2019

Όλοι όσοι εργάζονται με μεγάλα σύνολα δεδομένων στους Χάρτες Google αντιμετώπισαν το πρόβλημα της εμφάνισης μίας δέσμης δεικτών σε μια μικρή περιοχή. Όχι μόνο ένα βλέμμα, που εμφανίζει οτιδήποτε πάνω από εκατό εικονίδια δείκτη κάθε φορά, μπορεί να χτυπήσει το πρόγραμμα περιήγησης σε πολλές πλατφόρμες, το Safari στους Macs της ΔΕΗ που προσφέρει το μεγαλύτερο πόνο.

Η λύση είναι να συγκεντρώσει τους κοντινούς δείκτες σε έναν συγκεντρωτικό δείκτη όταν εμφανίζονται πάρα πολλοί δείκτες ή όταν οι δείκτες είναι τόσο κοντά σε ένα συγκεκριμένο επίπεδο ζουμ που καλύπτουν πλήρως. Για εξαιρετικά μεγάλα σύνολα δεδομένων αυτό γίνεται πιο αποτελεσματικά στο back-end, με διαδοχικές κλήσεις AJAX να ανανεώνεται το σετ σημειώσεων από μια δέσμη ενεργειών PHP που φιλτράρει τους ορατούς δείκτες από το σετ.

Μπορείτε επίσης να χειριστείτε την ομαδοποίηση στην πλευρά του πελάτη, χρησιμοποιώντας javascript για να σαρώσετε ολόκληρο το σύνολο των θέσεων και να προσδιορίσετε δυναμικά το τι είναι ορατό και τι πρέπει να συγκεντρωθεί. Το μειονέκτημα είναι ότι πρέπει να κατεβάσετε ολόκληρο το σετ και να το αποθηκεύσετε στη μνήμη του προγράμματος περιήγησης, αλλά αν δεν αρχίσετε να φτάνετε σε δεκάδες χιλιάδες δείκτες, αυτό δεν είναι μεγάλο πρόβλημα. Το πλεονέκτημα για τη μέθοδο πλευράς πελάτη είναι ότι είναι λιγότερο περίπλοκο, σας επιτρέπει να επεξεργαστείτε μεγάλα σύνολα αποτελεσμάτων από API back-end που δεν μπορείτε να ελέγξετε και με τη βιβλιοθήκη javascript του ACME Labs Clusterer είναι εξαιρετικά εύκολο να κωδικοποιήσετε.

Για να χρησιμοποιήσετε το Clusterer, κάντε πρώτα λήψη και συμπεριλάβετε το αρχείο Clusterer2.js από τον παρακάτω σύνδεσμο στη σελίδα των χαρτών σας. Στη συνέχεια, πρέπει να δημιουργήσετε ένα παράδειγμα ενός αντικειμένου Clusterer, περνώντας το αντικείμενο του χάρτη σας στον κατασκευαστή του:

var clusterManager = νέος συμπλέκτης (map);

Από εκεί, μπορείτε να το χρησιμοποιήσετε στη θέση του παραδοσιακού MarkerManager ή οποιωνδήποτε κλήσεων addOverlay καλώντας τη μέθοδο addMarker του Clusterer. Χρειάζονται δύο παραμέτρους, ο δείκτης για προσθήκη και μια συμβολοσειρά κειμένου που θα εμφανίζεται στα περιεχόμενα του συμπλέγματος όταν γίνεται κλικ:

clusterManager.AddMarker (δείκτης, "Περιγραφή δείκτη").

Ο διαχειριστής συμπλέγματος θα φροντίσει όλη την βρώμικη δουλειά, προβάλλοντας μόνο στοιχεία όταν βρίσκονται μέσα στην άποψή σας και δυναμικά συσσωρεύοντας τα σωστά όταν υπάρχουν πάρα πολλά στην οθόνη ταυτόχρονα. Όταν κάνετε κλικ σε ένα από τα clusters, θα εμφανιστεί μια λίστα με τις θέσεις μέσα σε αυτό. Τα περισσότερα από αυτά που θα θέλατε να τροποποιήσετε, όπως το κατώφλι στο οποίο μπορείτε να ξεκινήσετε την ομαδοποίηση και το εικονίδιο που χρησιμοποιείται για την εκπροσώπηση ενός συμπλέγματος, είναι όλα ρυθμιζόμενα μέσω του API μέσω ορισμένων μεθόδων που είναι αυτονόητες, όπως SetMaxVisibleMarkers (n) και SetIcon (εικονίδιο) . Ακολουθήστε τον παρακάτω σύνδεσμο για περισσότερες πληροφορίες ή διαβάστε την πηγή για μερικές από τις λιγότερο τεκμηριωμένες επιλογές.

Τεκμηρίωση συμπλέγματος Πηγές συμπλέγματος



Μπορεί Να Σας Ενδιαφέρει

Χώρος βιοτεχνίας: Natalie Zee Drieu

Χώρος βιοτεχνίας: Natalie Zee Drieu


Πώς να κάνετε: Κάντε ένα δέντρο κοσμήματος

Πώς να κάνετε: Κάντε ένα δέντρο κοσμήματος


Alt.CES: Η D-Link ανακοινώνει Boxee Box, τώρα στο Dali-esque form factor

Alt.CES: Η D-Link ανακοινώνει Boxee Box, τώρα στο Dali-esque form factor


Alt.CES 2010 - Η MAKE παίρνει τη μανία gadget

Alt.CES 2010 - Η MAKE παίρνει τη μανία gadget