Πώς να αλλάξετε το χρώμα των δεικτών των Χαρτών Google με JavaScript

Κάντε τα ροζ, μπλε, πράσινο, κίτρινο ή μοβ!

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

1. Φορτώστε τους Χάρτες Google

Δημιουργήστε ένα αρχείο HTML που φορτώνει τους Χάρτες Google ακολουθώντας τα επίσημα έγγραφα του API Χαρτών Google: Hello World.

Ο κωδικός σας θα μοιάζει με το παρακάτω απόσπασμα κώδικα.

Σημείωση: Μην ξεχάσετε να αλλάξετε YOUR_API_KEYτο πραγματικό κλειδί API των Χαρτών Google.

2. Προσθέστε διαφορετικούς χρωματικούς δείκτες

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

icon: { url: "//maps.google.com/mapfiles/ms/icons/blue-dot.png" }

Σημειώστε ότι καθορίζουμε blue-dot.pngστο τέλος του URL για να λάβουμε έναν μπλε δείκτη. Για να προσθέσετε έναν πράσινο δείκτη απλώς αλλάξτε το green-dot.pngέτσι ώστε να είναι το URL //maps.google.com/mapfiles/ms/icons/green-dot.png.

Μερικά άλλα διαθέσιμα χρώματα:

  1. ροζ: pink-dot.png
  2. κίτρινος: yellow-dot.png
  3. μωβ: purple-dot.png

Για να λάβετε τη διεύθυνση URL περισσότερων εικονιδίων σήμανσης, ανατρέξτε σε αυτόν τον ιστότοπο.

3. Τυλίξτε τη λειτουργία προσθήκης δείκτη

Για να κάνουμε τον κώδικα πιο καθαρό, μπορούμε να ορίσουμε μια addMarkerσυνάρτηση που παίρνει latLngκαι colorτου δείκτη. Λάβετε υπόψη ότι αποθηκεύουμε τους δείκτες που έχουν προστεθεί στο παγκόσμιο markersArrayσε περίπτωση που χρειαστεί να εκτελέσουμε οποιαδήποτε λειτουργία στους δείκτες αργότερα.

Ανοίξτε το αρχείο HTML στο πρόγραμμα περιήγησης. Θα πρέπει να μοιάζει με αυτό:

Μπορείτε να λάβετε την πλήρη τελική έκδοση του κώδικα από εδώ. Παρακαλώ επιτρέψτε μου να ξέρω πώς πηγαίνει στα παρακάτω σχόλια.

Μη διστάσετε να δείτε ένα άλλο σεμινάριο για τους Χάρτες Google που έχω γράψει:

Πραγματοποιήστε κλικ στο JavaScript Google Map για να προσθέσετε συρόμενους δείκτες με polyline