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

پلتفرم را انتخاب کنید: Android iOS JavaScript

بررسی اجمالی

این آموزش به شما نشان می دهد که چگونه از خوشه های نشانگر برای نمایش تعداد زیادی نشانگر روی نقشه استفاده کنید. می‌توانید از کتابخانه @googlemaps/markerclusterer در ترکیب با Maps JavaScript API برای ترکیب نشانگرهای نزدیک به خوشه‌ها استفاده کنید و نمایش نشانگرها را روی نقشه ساده کنید.

برای مشاهده نحوه عملکرد خوشه بندی نشانگر، نقشه زیر را مشاهده کنید.

عدد روی یک خوشه نشان می دهد که چه تعداد نشانگر دارد. توجه داشته باشید که با بزرگنمایی در هر یک از مکان‌های خوشه، تعداد روی خوشه کاهش می‌یابد و شما شروع به دیدن نشانگرهای جداگانه روی نقشه می‌کنید. بزرگ‌نمایی نقشه، نشانگرها را دوباره در خوشه‌ها ادغام می‌کند.

نمونه زیر کل کد مورد نیاز برای ایجاد این نقشه را نشان می دهد.

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();
index.ts

توجه: راهنمای استفاده از TypeScript و Google Maps را بخوانید.

جاوا اسکریپت

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

توجه: جاوا اسکریپت از قطعه TypeScript کامپایل شده است.

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>

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

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

JSFiddle.net Google Cloud Shell

به عنوان یک تصویر ساده، این آموزش مجموعه ای از نشانگرها را با استفاده از آرایه 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({ markers, map });

   CDN

   هنگامی که با CDN قابل دسترسی است، کتابخانه تحت markerClusterer global در دسترس است.

   const markerCluster = new markerClusterer.MarkerClusterer({ markers, map });

   این نمونه آرایه markers را به MarkerClusterer ارسال می کند.

3. خوشه نشانگر را سفارشی کنید.
   • نماد خوشه را از طریق رابط رندر سفارشی کنید .
   • الگوریتم تولید خوشه ها را اصلاح کنید .

بیشتر بدانید

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