بررسی اجمالی
این آموزش به شما نشان می دهد که چگونه از خوشه های نشانگر برای نمایش تعداد زیادی نشانگر روی نقشه استفاده کنید. میتوانید از کتابخانه @googlemaps/markerclusterer در ترکیب با Maps JavaScript API برای ترکیب نشانگرهای نزدیک به خوشهها استفاده کنید و نمایش نشانگرها را روی نقشه ساده کنید.
برای مشاهده نحوه عملکرد خوشه بندی نشانگر، نقشه زیر را مشاهده کنید.
عدد روی یک خوشه نشان می دهد که چه تعداد نشانگر دارد. توجه داشته باشید که با بزرگنمایی در هر یک از مکانهای خوشه، تعداد روی خوشه کاهش مییابد و شما شروع به دیدن نشانگرهای جداگانه روی نقشه میکنید. بزرگنمایی نقشه، نشانگرها را دوباره در خوشهها ادغام میکند.
نمونه زیر کل کد مورد نیاز برای ایجاد این نقشه را نشان می دهد.
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;
جاوا اسکریپت
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 with https://www.npmjs.com/package/@googlemaps/js-api-loader. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly" defer ></script> </body> </html>
Sample را امتحان کنید
به عنوان یک تصویر ساده، این آموزش مجموعه ای از نشانگرها را با استفاده از آرایه locations
ها به نقشه اضافه می کند. می توانید از منابع دیگر برای دریافت نشانگر نقشه خود استفاده کنید. برای اطلاعات بیشتر، راهنمای ایجاد نشانگر را بخوانید.
اضافه کردن یک خوشه نشانگر
برای افزودن یک خوشه نشانگر مراحل زیر را دنبال کنید:
- کتابخانه خوشه بندی نشانگر را به صفحه یا برنامه خود اضافه کنید. این کتابخانه در NPM در @googlemaps/markerclusterer و در مخزن در GitHub در دسترس است.
NPM
آخرین نسخه کتابخانه @googlemaps/markerclusterer را با استفاده از NPM نصب کنید.
npm install @googlemaps/markerclusterer
CDN
اسکریپت زیر آخرین نسخه 1.xx کتابخانه را از CDN unpkg.com بارگیری می کند.
<script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>
- یک خوشه نشانگر در برنامه خود اضافه کنید.
کد زیر یک خوشه نشانگر به نقشه اضافه می کند.
NPM
import { MarkerClusterer } from "@googlemaps/markerclusterer"; const markerCluster = new MarkerClusterer({ map, markers });
CDN
هنگامی که با CDN قابل دسترسی است، کتابخانه تحت
markerClusterer
global در دسترس است.const markerCluster = new markerClusterer.MarkerClusterer({ map, markers });
این نمونه آرایه
markers
را بهMarkerClusterer
می کند. - خوشه نشانگر را سفارشی کنید.
بیشتر بدانید
میتوانید نمونههای پیچیدهتری از خوشهبندی نشانگرها را در مخزن GitHub مشاهده کنید و مستندات مرجع کتابخانه را بخوانید.