Panoramica
Questo tutorial mostra come utilizzare i cluster di indicatori per visualizzare un gran numero di indicatori su una mappa. Puoi utilizzare la libreria @googlemaps/indicatoreclusterer in combinazione con l'API Maps JavaScript per combinare gli indicatori di prossimità ravvicinati con i cluster e semplificare la visualizzazione degli indicatori sulla mappa.
Per vedere come funziona il clustering degli indicatori, guarda la mappa di seguito.
Il numero su un cluster indica quanti indicatori contiene. Quando aumenti lo zoom su una delle località del cluster, il numero sul cluster diminuisce e inizi a vedere i singoli indicatori sulla mappa. Diminuisci lo zoom sulla mappa consolida di nuovo gli indicatori in cluster.
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>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<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 di esempio
Come illustrazione semplice, questo tutorial aggiunge un insieme di indicatori alla mappa utilizzando l'array locations. Puoi utilizzare altre fonti per ottenere gli indicatori sulla mappa.
Per ulteriori informazioni, leggi la guida alla creazione degli indicatori.
Aggiungi un cluster di indicatori
Per aggiungere un cluster di indicatori, procedi nel seguente modo:
- Aggiungi la libreria di clustering degli indicatori alla tua pagina o applicazione. La libreria è disponibile in NPM all'indirizzo @googlemaps/indicatoreclusterer e nel repository su GitHub.
Gestione dei partner di rete
Installa la versione più recente della libreria @googlemaps/indicatoreclusterer utilizzando NPM.
npm install @googlemaps/markerclusterer
CDN
Lo script seguente carica la versione 1.x.x più recente della libreria dal file unpkg.com CDN.
<script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>
- Aggiungi un cluster di indicatori nella tua app.
Il codice seguente aggiunge un cluster di indicatori alla mappa.
Gestione dei partner di rete
import { MarkerClusterer } from "@googlemaps/markerclusterer"; const markerCluster = new MarkerClusterer({ map, markers });CDN
Quando si accede con la rete CDN, la raccolta è disponibile nella versione globale di
markerClusterer.const markerCluster = new markerClusterer.MarkerClusterer({ map, markers });Questo esempio trasmette l'array
markersaMarkerClusterer. - Personalizza il cluster di indicatori.
- Personalizza l'icona del cluster tramite l'interfaccia del renderer.
- Modifica l'algoritmo per la generazione di cluster.
Scopri di più
Puoi visualizzare esempi più complessi di clustering degli indicatori nel repository su GitHub e leggere la documentazione di riferimento per la libreria.