W tym tutorialu pokazujemy, jak wyświetlić dużą liczbę markerów na mapie przy użyciu funkcji Marker Clustering, czyli grupowania markerów, jak na przykladzie poniżej.
Poniżej cały kod html wraz ze skyptem Google Maps API. Skopiuj i wklej do edytora (chodzi o edytor dla programistów np. np. RJ TextEd lub inny), a następnie zapisz jako plik html i otwórz plik w przeglądarce (np. Chrome). Powinna się wyświtlić strona z mapą (jak powyżej).
UWAGA! Pamietaj o wpisaniu/podmianie Klucza API. Jak uzyskać klucz API?
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>Marker Clustering - - grupowanie markerów na mapie</title> <style> /* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } </style> </head> <body> <div id="map"></div> <script> function initMap() { var map = new google.maps.Map(document.getElementById('map'), { zoom: 3, center: {lat: -28.024, lng: 140.887} }); // Create an array of alphabetical characters used to label the markers. var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; // Add some markers to the map. // Note: The code uses the JavaScript Array.prototype.map() method to // create an array of markers based on a given "locations" array. // The map() method here has nothing to do with the Google Maps API. var markers = locations.map(function(location, i) { return new google.maps.Marker({ position: location, label: labels[i % labels.length] }); }); // Add a marker clusterer to manage the markers. var markerCluster = new MarkerClusterer(map, markers, {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'}); } var locations = [ {lat: 51.563910, lng: 17.1254312}, {lat: 51.562910, lng: 17.1354312}, {lat: 51.564910, lng: 17.1154312}, {lat: 51.565910, lng: 17.1154312}, {lat: 51.573910, lng: 17.1154312}, {lat: 51.583910, lng: 17.1154312}, {lat: 51.563910, lng: 17.1454312}, {lat: 51.563910, lng: 17.1354312}, {lat: 48.828611, lng: 15.1730222}, {lat: 48.828611, lng: 15.1760222}, {lat: 48.828611, lng: 15.1770222}, {lat: 48.828611, lng: 15.1890222}, {lat: 48.838611, lng: 15.1790222}, {lat: 48.818611, lng: 15.1790222}, {lat: 44.764785, lng: 2.137978}, {lat: 44.754785, lng: 2.137978}, {lat: 44.744785, lng: 2.137978}, {lat: 44.734785, lng: 2.147978}, {lat: 44.774785, lng: 2.137978}, {lat: 44.774785, lng: 2.127978}, {lat: 44.774785, lng: 2.135978}, {lat: 44.774785, lng: 2.134978} ] </script> <!-- Replace following script src --> <script src="/maps/documentation/javascript/examples/markerclusterer/
Ten adres pocztowy jest chroniony przed spamowaniem. Aby go zobaczyć, konieczne jest włączenie w przeglądarce obsługi JavaScript. "> </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> </script> </body> </html>
Biblioteka MarkerClustererPlus wykorzystuje technikę klastrowania opartą na siatce, która dzieli mapę na kwadraty o określonym rozmiarze (rozmiar zmienia się na każdym poziomie powiększenia) i grupuje markery na każdej kwadratowej siatce. Tworzy klaster przy określonym markerze i dodaje do klastra markery znajdujące się w jego granicach. Powtarza ten proces, dopóki wszystkie znaczniki nie zostaną przydzielone do najbliższych skupisk znaczników opartych na siatce na podstawie poziomu powiększenia mapy. Jeśli znaczniki znajdują się w granicach więcej niż jednego istniejącego klastra, interfejs API Maps JavaScript określa odległość markera od każdego klastra i dodaje go do najbliższego klastra.
Możesz ustawić opcję MarkerClusterer, aby dostosować pozycję klastra, aby odzwierciedlić średnią odległość między wszystkimi zawartymi w nim markerami. Możesz także dostosować MarkerClusterer, aby zmodyfikować inne parametry, takie jak rozmiar siatki, ikona klastra, tekst klastra i inne.
Wykonaj poniższe kroki, aby dodać klaster znaczników:
1. Pobierz bibliotekę klastrowania znaczników i obrazy z GitHub i przechowuj je na serwerze dostępnym dla Twojej aplikacji.
Biblioteka JavaScript i pliki obrazów dla MarkerClusterer są dostępne w repozytorium Google Maps repo on GitHub. Pobierz lub skopiuj następujące pliki z GitHub do lokalizacji dostępnej dla Twojej aplikacji:
2. Dodaj bibliotekę klastrowania znaczników do swojej strony.
W kodzie tego samouczka poniższy skrypt ładuje bibliotekę MarkerClustererPlus.
<script src="https://unpkg.com/@google/markerclustererplus@4.0.1/dist/markerclustererplus.min.js"></script>3. Dodaj klaster znaczników do swojej aplikacji.
Poniższy kod dodaje klaster znaczników do mapy.
var markerCluster = new MarkerClusterer(map, markers, {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});Ta próbka przekazuje tablicę markerów do MarkerClusterer. Określa również lokalizację wszystkich pięciu plików obrazów w parametrze imagePath. Zastąp to ścieżką do miejsca, w którym zapisałeś te same pliki obrazów.