Marker Clustering - klastery markerów na mapie

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.

Wyświetl mapę na osobnej stronie

Cały kod strony z mapą:

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.

Dodanie klastra znaczników

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.
  • Odsłony: 3681