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 vicinanza in cluster e semplificare la visualizzazione degli indicatori sulla mappa.
Per scoprire come funziona il clustering degli indicatori, visualizza la mappa di seguito.
Il numero su un cluster indica quanti indicatori contiene. Nota che, man mano che aumenti lo zoom delle posizioni del cluster, il numero nel 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
function initMap(): void {
const map = new google.maps.Map(
document.getElementById("map") as HTMLElement,
{
zoom: 3,
center: { lat: -28.024, lng: 140.887 },
}
);
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 marker = new google.maps.Marker({
position,
label,
});
// markers can only be keyboard focusable when they have click listeners
// open info window when marker is clicked
marker.addListener("click", () => {
infoWindow.setContent(label);
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 },
];
declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
JavaScript
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 3,
center: { lat: -28.024, lng: 140.887 },
});
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 marker = new google.maps.Marker({
position,
label,
});
// markers can only be keyboard focusable when they have click listeners
// open info window when marker is clicked
marker.addListener("click", () => {
infoWindow.setContent(label);
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 },
];
window.initMap = 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>
<!--
The `defer` attribute causes the callback to execute after the full HTML
document has been parsed. For non-blocking uses, avoiding race conditions,
and consistent behavior across browsers, consider loading using Promises.
See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
for more information.
-->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
defer
></script>
</body>
</html>
Prova anteprima
Come illustrazione semplice, questo tutorial aggiunge un insieme di indicatori alla mappa utilizzando l'array di locations. Puoi utilizzare altre origini per ottenere gli indicatori per la mappa.
Per scoprire di più, consulta la guida alla creazione di indicatori.
Aggiunta di un indicatore di clustering
Per aggiungere un cluster di indicatori:
- Aggiungi la libreria di cluster di indicatori alla pagina o all'applicazione. La libreria è disponibile su NPM all'indirizzo @googlemaps/indicatoreclusterer e nel repository su GitHub.
Gestione dei partner di rete
Installa la versione più recente della libreria @googlemaps/signalsclusterer utilizzando NPM.
npm install @googlemaps/markerclusterer
CDN
Lo script riportato di seguito carica la versione 1.x.x più recente della libreria dalla risorsa CDN unpkg.com.
<script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>
- Aggiungi un cluster cluster di indicatori nella tua app.
Il codice seguente aggiunge un cluster di indicatore alla mappa.
Gestione dei partner di rete
import { MarkerClusterer } from "@googlemaps/markerclusterer"; const markerCluster = new MarkerClusterer({ map, markers });CDN
Quando viene utilizzata con la rete CDN, la libreria è disponibile in
markerClusterera livello globale.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.