خوشه بندی نشانگر

با مجموعه‌ها، منظم بمانید ذخیره و دسته‌بندی محتوا براساس اولویت‌های شما.
پلتفرم را انتخاب کنید: Android iOS JavaScript

بررسی اجمالی

این آموزش به شما نشان می دهد که چگونه از خوشه های نشانگر برای نمایش تعداد زیادی نشانگر روی نقشه استفاده کنید. می‌توانید از کتابخانه @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;
index.ts

جاوا اسکریپت

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;
index.js

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;
}

style.css

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>
index.html

Sample را امتحان کنید

به عنوان یک تصویر ساده، این آموزش مجموعه ای از نشانگرها را با استفاده از آرایه locations ها به نقشه اضافه می کند. می توانید از منابع دیگر برای دریافت نشانگر نقشه خود استفاده کنید. برای اطلاعات بیشتر، راهنمای ایجاد نشانگر را بخوانید.

اضافه کردن یک خوشه نشانگر

برای افزودن یک خوشه نشانگر مراحل زیر را دنبال کنید:

  1. کتابخانه خوشه بندی نشانگر را به صفحه یا برنامه خود اضافه کنید. این کتابخانه در 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>
  2. یک خوشه نشانگر در برنامه خود اضافه کنید.

    کد زیر یک خوشه نشانگر به نقشه اضافه می کند.

    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 می کند.

  3. خوشه نشانگر را سفارشی کنید.

بیشتر بدانید

می‌توانید نمونه‌های پیچیده‌تری از خوشه‌بندی نشانگرها را در مخزن GitHub مشاهده کنید و مستندات مرجع کتابخانه را بخوانید.