Panoramica
Questo tutorial illustra come utilizzare gruppi di indicatori per visualizzare un numero elevato di indicatori su una mappa. Puoi utilizzare la libreria @googlemaps/markerclusterer in combinazione con l'API Maps JavaScript per combinare gli indicatori di prossimità in cluster 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 man mano che aumenti lo zoom su una delle località del cluster, il numero sul cluster diminuisce e inizia a vedere i singoli 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 l'array locations. Puoi utilizzare altre fonti per ottenere indicatori per la tua mappa.
Per saperne di più, leggi la guida alla creazione degli 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 nel 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 cluster 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'
markerClustererglobale.const markerCluster = new markerClusterer.MarkerClusterer({ markers, map });Questo esempio passa l'array
markersaMarkerClusterer. - 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 clustering di indicatori nel repository su GitHub e leggere la documentazione di riferimento per la libreria.