मार्कर क्लस्टरिंग

प्लैटफ़ॉर्म चुनें: Android iOS JavaScript

खास जानकारी

यह ट्यूटोरियल आपको दिखाता है कि किसी मैप पर बड़ी संख्या में मार्कर दिखाने के लिए, मार्कर क्लस्टर का इस्तेमाल कैसे किया जाता है. Google आपके यूआरएल पैरामीटर को कैसे इस्तेमाल करेगा, यह तय करने के लिए @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
अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

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();
index.js
अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सीएसएस

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

सैंपल आज़माएं

आसान उदाहरण के तौर पर, यह ट्यूटोरियल मैप पर मार्कर का एक सेट जोड़ता है. इसके लिए, locations कलेक्शन. अपने मैप के लिए मार्कर पाने के लिए आप अन्य स्रोतों का इस्तेमाल कर सकते हैं. ज़्यादा जानकारी के लिए, मार्कर बनाना.

कोई मार्कर क्लस्टर जोड़ें

मार्कर क्लस्टर जोड़ने के लिए, नीचे दिया गया तरीका अपनाएं:

  1. अपने पेज या ऐप्लिकेशन पर मार्कर क्लस्टरिंग लाइब्रेरी जोड़ें. यह लाइब्रेरी, NPM पर @googlemaps/markerclusterer पर और GitHub पर डेटा स्टोर करने की जगह.

    एनपीएम

    NPM का इस्तेमाल करके, @googlemaps/markerclusterer लाइब्रेरी का नया वर्शन इंस्टॉल करें.

    npm install @googlemaps/markerclusterer

    सीडीएन

    नीचे दी गई स्क्रिप्ट, unpkg.com CDN से लाइब्रेरी का सबसे नया 1.x.x वर्शन लोड करती है.

    <script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>
  2. अपने ऐप्लिकेशन में मार्कर क्लस्टर जोड़ें.
    अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

    नीचे दिया गया कोड मैप में एक मार्कर क्लस्टर जोड़ता है.

    एनपीएम

    import { MarkerClusterer } from "@googlemaps/markerclusterer";

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

    सीडीएन

    सीडीएन से ऐक्सेस करने पर, यह लाइब्रेरी markerClusterer ग्लोबल के तहत उपलब्ध होती है.

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

    यह सैंपल, markers कलेक्शन को MarkerClusterer में पास करता है.

  3. मार्कर क्लस्टर को पसंद के मुताबिक बनाएं.

ज़्यादा जानें

मार्कर क्लस्टरिंग के ज़्यादा जटिल उदाहरण यहां देखें: GitHub पर डेटा स्टोर करने की जगह पर जाएं और लाइब्रेरी के लिए रेफ़रंस दस्तावेज़.