Panoramica
Questo tutorial illustra come utilizzare gruppi di indicatori per visualizzare un numero elevato di indicatori su una mappa. Puoi utilizzare lo @googlemaps/markerclusterer in combinazione con l'API Maps JavaScript per combinare gli indicatori molto vicini in gruppi e semplificare la visualizzazione degli indicatori sulla mappa.
Per vedere come funziona il raggruppamento di indicatori, visualizza la mappa di seguito.
Il numero su un cluster indica quanti indicatori contiene. Nota che mentre aumenti lo zoom delle località del cluster, il numero diminuisce e inizi a vedere indicatori sulla mappa. Diminuendo lo zoom della mappa, gli indicatori vengono raggruppati di nuovo in gruppi.
L'esempio seguente mostra l'intero codice necessario per creare questa mappa.
TypeScript
async function initMap() { // Request needed libraries. const { Map, InfoWindow } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 3, center: { lat: -28.024, lng: 140.887 }, mapId: 'DEMO_MAP_ID', } ); const infoWindow = new google.maps.InfoWindow({ content: "", disableAutoPan: true, }); // Create an array of alphabetical characters used to label the markers. const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; // Add some markers to the map. const markers = locations.map((position, i) => { const label = labels[i % labels.length]; const pinGlyph = new google.maps.marker.PinElement({ glyph: label, glyphColor: "white", }) const marker = new google.maps.marker.AdvancedMarkerElement({ position, content: pinGlyph.element, }); // markers can only be keyboard focusable when they have click listeners // open info window when marker is clicked marker.addListener("click", () => { infoWindow.setContent(position.lat + ", " + position.lng); infoWindow.open(map, marker); }); return marker; }); // Add a marker clusterer to manage the markers. new MarkerClusterer({ markers, map }); } const locations = [ { lat: -31.56391, lng: 147.154312 }, { lat: -33.718234, lng: 150.363181 }, { lat: -33.727111, lng: 150.371124 }, { lat: -33.848588, lng: 151.209834 }, { lat: -33.851702, lng: 151.216968 }, { lat: -34.671264, lng: 150.863657 }, { lat: -35.304724, lng: 148.662905 }, { lat: -36.817685, lng: 175.699196 }, { lat: -36.828611, lng: 175.790222 }, { lat: -37.75, lng: 145.116667 }, { lat: -37.759859, lng: 145.128708 }, { lat: -37.765015, lng: 145.133858 }, { lat: -37.770104, lng: 145.143299 }, { lat: -37.7737, lng: 145.145187 }, { lat: -37.774785, lng: 145.137978 }, { lat: -37.819616, lng: 144.968119 }, { lat: -38.330766, lng: 144.695692 }, { lat: -39.927193, lng: 175.053218 }, { lat: -41.330162, lng: 174.865694 }, { lat: -42.734358, lng: 147.439506 }, { lat: -42.734358, lng: 147.501315 }, { lat: -42.735258, lng: 147.438 }, { lat: -43.999792, lng: 170.463352 }, ]; initMap();
JavaScript
async function initMap() { // Request needed libraries. const { Map, InfoWindow } = await google.maps.importLibrary("maps"); const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary( "marker", ); const map = new google.maps.Map(document.getElementById("map"), { zoom: 3, center: { lat: -28.024, lng: 140.887 }, mapId: "DEMO_MAP_ID", }); const infoWindow = new google.maps.InfoWindow({ content: "", disableAutoPan: true, }); // Create an array of alphabetical characters used to label the markers. const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; // Add some markers to the map. const markers = locations.map((position, i) => { const label = labels[i % labels.length]; const pinGlyph = new google.maps.marker.PinElement({ glyph: label, glyphColor: "white", }); const marker = new google.maps.marker.AdvancedMarkerElement({ position, content: pinGlyph.element, }); // markers can only be keyboard focusable when they have click listeners // open info window when marker is clicked marker.addListener("click", () => { infoWindow.setContent(position.lat + ", " + position.lng); infoWindow.open(map, marker); }); return marker; }); // Add a marker clusterer to manage the markers. new MarkerClusterer({ markers, map }); } const locations = [ { lat: -31.56391, lng: 147.154312 }, { lat: -33.718234, lng: 150.363181 }, { lat: -33.727111, lng: 150.371124 }, { lat: -33.848588, lng: 151.209834 }, { lat: -33.851702, lng: 151.216968 }, { lat: -34.671264, lng: 150.863657 }, { lat: -35.304724, lng: 148.662905 }, { lat: -36.817685, lng: 175.699196 }, { lat: -36.828611, lng: 175.790222 }, { lat: -37.75, lng: 145.116667 }, { lat: -37.759859, lng: 145.128708 }, { lat: -37.765015, lng: 145.133858 }, { lat: -37.770104, lng: 145.143299 }, { lat: -37.7737, lng: 145.145187 }, { lat: -37.774785, lng: 145.137978 }, { lat: -37.819616, lng: 144.968119 }, { lat: -38.330766, lng: 144.695692 }, { lat: -39.927193, lng: 175.053218 }, { lat: -41.330162, lng: 174.865694 }, { lat: -42.734358, lng: 147.439506 }, { lat: -42.734358, lng: 147.501315 }, { lat: -42.735258, lng: 147.438 }, { lat: -43.999792, lng: 170.463352 }, ]; initMap();
CSS
/* * 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; }
HTML
<html> <head> <title>Marker Clustering</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map"></div> <!-- prettier-ignore --> <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))}) ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script> </body> </html>
Prova Sample
A titolo di semplice illustrazione, questo tutorial aggiunge un insieme di indicatori alla mappa utilizzando
Array locations
. Puoi utilizzare altre fonti per ottenere indicatori per la tua mappa.
Per ulteriori informazioni, leggi la guida per
creare indicatori.
Aggiungi un raggruppamento di indicatori
Per aggiungere un raggruppamento di indicatori, procedi nel seguente modo:
- Aggiungi la libreria di clustering di indicatori alla tua pagina o alla tua applicazione. La libreria è disponibile su Gestione dei partner di rete all'indirizzo @googlemaps/markerclusterer e nei
repository su GitHub.
Gestione dei partner di rete
Installa l'ultima versione della libreria @googlemaps/markerclusterer utilizzando la gestione dei partner di rete.
npm install @googlemaps/markerclusterer
CDN
Lo script riportato di seguito carica l'ultima versione 1.x.x della libreria dalla unpkg.com CDN.
<script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>
- Aggiungi un raggruppamento di indicatori nella tua app.
Il codice riportato di seguito consente di aggiungere un cluster di indicatori alla mappa.
Gestione dei partner di rete
import { MarkerClusterer } from "@googlemaps/markerclusterer"; const markerCluster = new MarkerClusterer({ markers, map });
CDN
Se vi si accede con la CDN, la libreria è disponibile nell'
markerClusterer
globale.const markerCluster = new markerClusterer.MarkerClusterer({ markers, map });
Questo esempio passa l'array
markers
aMarkerClusterer
. - Personalizza il raggruppamento di indicatori.
- Personalizza l'icona del cluster tramite l'interfaccia del renderer.
- Modifica l'algoritmo per la generazione dei cluster.
Scopri di più
Puoi visualizzare esempi più complessi di raggruppamento di indicatori nella in un repository su GitHub e leggi documentazione di riferimento per la biblioteca.