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

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

खास जानकारी

इस ट्यूटोरियल में, मार्कर क्लस्टर का इस्तेमाल करके, मैप पर ज़्यादा मार्कर दिखाने का तरीका बताया गया है. Maps JavaScript API के साथ, @googlemaps/markerclusterer लाइब्रेरी का इस्तेमाल करके, आस-पास मौजूद मार्कर को क्लस्टर में जोड़ा जा सकता है. साथ ही, मैप पर मार्कर दिखाने की प्रोसेस को आसान बनाया जा सकता है.

मार्कर क्लस्टरिंग की सुविधा कैसे काम करती है, यह देखने के लिए, यहां दिया गया मैप देखें.

किसी क्लस्टर पर दिखने वाली संख्या से पता चलता है कि उसमें कितने मार्कर शामिल हैं. ध्यान दें कि क्लस्टर वाली किसी भी जगह पर ज़ूम करने पर, क्लस्टर पर दिखने वाली संख्या कम हो जाती है. साथ ही, आपको मैप पर अलग-अलग मार्कर दिखने लगते हैं. मैप से ज़ूम आउट करने पर, मार्कर फिर से क्लस्टर में जुड़ जाते हैं.

यहां दिए गए सैंपल में, इस मैप को बनाने के लिए ज़रूरी पूरा कोड दिखाया गया है.

TypeScript

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

async function init() {
    // Request needed libraries.
    const [{ InfoWindow }, { AdvancedMarkerElement, PinElement }] =
        await Promise.all([
            google.maps.importLibrary('maps'),
            google.maps.importLibrary('marker'),
        ]);

    const mapElement =
        document.querySelector<google.maps.MapElement>('gmp-map')!;
    const innerMap = mapElement.innerMap;

    const infoWindow = new 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 PinElement({
            glyphText: label,
            glyphColor: 'white',
        });

        const marker = new AdvancedMarkerElement({
            position,
            content: pinGlyph,
            gmpClickable: true,
        });

        // markers can only be keyboard focusable when they have click listeners
        // open info window when marker is clicked
        marker.addEventListener('gmp-click', () => {
            const content = document.createElement('div');
            content.textContent = `${String(position.lat)}, ${String(position.lng)}`;
            infoWindow.setContent(content);

            infoWindow.open({
                anchor: marker,
                map: innerMap,
            });
        });
        return marker;
    });

    // Add a marker clusterer to manage the markers.
    new MarkerClusterer({ markers, map: innerMap });
}

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

void init();

JavaScript

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

async function init() {
    // Request needed libraries.
    const [{ InfoWindow }, { AdvancedMarkerElement, PinElement }] =
        await Promise.all([
            google.maps.importLibrary('maps'),
            google.maps.importLibrary('marker'),
        ]);

    const mapElement = document.querySelector('gmp-map');
    const innerMap = mapElement.innerMap;

    const infoWindow = new 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 PinElement({
            glyphText: label,
            glyphColor: 'white',
        });

        const marker = new AdvancedMarkerElement({
            position,
            content: pinGlyph,
            gmpClickable: true,
        });

        // markers can only be keyboard focusable when they have click listeners
        // open info window when marker is clicked
        marker.addEventListener('gmp-click', () => {
            const content = document.createElement('div');
            content.textContent = `${String(position.lat)}, ${String(position.lng)}`;
            infoWindow.setContent(content);

            infoWindow.open({
                anchor: marker,
                map: innerMap,
            });
        });
        return marker;
    });

    // Add a marker clusterer to manage the markers.
    new MarkerClusterer({ markers, map: innerMap });
}

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

void init();

CSS

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

HTML

<html>
    <head>
        <title>Marker Clustering</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (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: "GOOGLE_MAPS_API_KEY",
            });
        </script>
    </head>
    <body>
        <gmp-map
            center="-28.024,140.887"
            zoom="3"
            map-id="DEMO_MAP_ID"></gmp-map>
    </body>
</html>

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

मार्कर क्लस्टरर जोड़ना

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

  1. अपने पेज या ऐप्लिकेशन में, मार्कर क्लस्टरिंग लाइब्रेरी जोड़ें. यह लाइब्रेरी, एनपीएम पर @googlemaps/markerclusterer और GitHub पर मौजूद डेटाबेस में उपलब्ध है. लाइब्रेरी इंस्टॉल करने के लिए, इनमें से कोई एक विकल्प चुनें:

    एनपीएम

    एनपीएम का इस्तेमाल करके, @googlemaps/markerclusterer लाइब्रेरी इंस्टॉल करें.

    npm install @googlemaps/markerclusterer

    CDN

    यहां दिया गया स्क्रिप्ट, unpkg.com सीडीएन से लाइब्रेरी लोड करता है.

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

    यहां दिए गए कोड से, मैप में मार्कर क्लस्टरर जोड़ा जाता है. इनमें से कोई एक विकल्प चुनें:

    एनपीएम

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

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

    CDN

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

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

    इस सैंपल में, markers अरे को MarkerClusterer में पास किया गया है.

  3. (ज़रूरी नहीं) क्लस्टर आइकॉन के दिखने के तरीके, क्लस्टरिंग एल्गोरिदम या क्लिक के व्यवहार में बदलाव करने के लिए, मार्कर क्लस्टरर को पसंद के मुताबिक बनाएं.

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

क्लस्टरर इंस्टेंस बनाते समय, MarkerClustererOptions ऑब्जेक्ट में अतिरिक्त विकल्प पास करके, MarkerClusterer को पसंद के मुताबिक बनाया जा सकता है:

  • renderer: इससे यह कंट्रोल किया जाता है कि मैप पर क्लस्टर मार्कर कैसे रेंडर किए जाएं.
  • algorithm और algorithmOptions: इससे यह कंट्रोल किया जाता है कि दूरी और ज़ूम लेवल के आधार पर, मार्कर को क्लस्टर में कैसे ग्रुप किया जाए.
  • onClusterClick: जब कोई उपयोगकर्ता क्लस्टर मार्कर पर क्लिक करता है, तो यह डिफ़ॉल्ट व्यवहार को बदल देता है.

यहां दिए गए मैप में, कस्टम क्लस्टर आइकॉन वाले मार्कर दिखाए गए हैं.

क्लस्टर आइकॉन को पसंद के मुताबिक बनाना

डिफ़ॉल्ट रूप से, MarkerClusterer uses DefaultRenderer SVG क्लस्टर आइकॉन बनाने के लिए इस्तेमाल करता है. क्लस्टर मार्कर के दिखने के तरीके को पसंद के मुताबिक बनाने के लिए, renderer विकल्प में ऐसा ऑब्जेक्ट पास करें जो Renderer इंटरफ़ेस को लागू करता हो.

Renderer इंटरफ़ेस के लिए, render(cluster, stats, map) तरीके की ज़रूरत होती है. यह AdvancedMarkerElement (या लेगसी google.maps.Marker) दिखाता है. render तरीके को ये आर्ग्युमेंट मिलते हैं:

  • cluster (Cluster): यह मार्कर के ग्रुप को दिखाता है. इसमें ये शामिल हैं:
    • count: क्लस्टर में दिखने वाले मार्कर की संख्या.
    • position: क्लस्टर की google.maps.LatLng सेंटर पोज़िशन.
    • bounds: क्लस्टर की google.maps.LatLngBounds.
    • markers: क्लस्टर में शामिल मार्कर का अरे.
  • stats (ClusterStats): यह मौजूदा रेंडर साइकल में सभी क्लस्टर के आंकड़े दिखाता है. जैसे, stats.clusters.markers.mean, min, max, और sum. इन वैल्यू का इस्तेमाल करके, क्लस्टर को उनके साइज़ के हिसाब से डाइनैमिक तरीके से स्टाइल किया जा सकता है.
  • map (google.maps.Map): मैप इंस्टेंस.

यहां दिए गए उदाहरण में, कस्टम renderer के बारे में बताया गया है. यह हर AdvancedMarkerElement के लिए, गोलाकार एचटीएमएल बैज बनाता है. साथ ही, क्लस्टर मार्कर की संख्या, क्लस्टर के औसत साइज़ से ज़्यादा होने पर, इसका बैकग्राउंड कलर बदल देता है.

TypeScript

// Customize the cluster icons using a custom Renderer
    const renderer = {
        render: (
            {
                count,
                position,
            }: { count: number; position: google.maps.LatLng },
            stats: ClusterStats
        ) => {
            // Change color based on the number of markers in the cluster relative to the mean
            const isLargeCluster =
                count > Math.max(10, stats.clusters.markers.mean);
            const clusterClass = isLargeCluster
                ? 'large-cluster'
                : 'small-cluster';

            // Build the HTML content for the Advanced Marker
            const content = document.createElement('div');
            content.classList.add('custom-cluster-icon', clusterClass);
            content.textContent = String(count);

            return new AdvancedMarkerElement({
                position,
                content,
                // Adjust zIndex to be above other markers
                zIndex: 1000 + count,
            });
        },
    };

    // Add a marker clusterer to manage the markers.
    new MarkerClusterer({ markers, map: innerMap, renderer });
}

JavaScript

// Customize the cluster icons using a custom Renderer
    const renderer = {
        render: ({ count, position }, stats) => {
            // Change color based on the number of markers in the cluster relative to the mean
            const isLargeCluster =
                count > Math.max(10, stats.clusters.markers.mean);
            const clusterClass = isLargeCluster
                ? 'large-cluster'
                : 'small-cluster';

            // Build the HTML content for the Advanced Marker
            const content = document.createElement('div');
            content.classList.add('custom-cluster-icon', clusterClass);
            content.textContent = String(count);

            return new AdvancedMarkerElement({
                position,
                content,
                // Adjust zIndex to be above other markers
                zIndex: 1000 + count,
            });
        },
    };

    // Add a marker clusterer to manage the markers.
    new MarkerClusterer({ markers, map: innerMap, renderer });
}

कस्टम रेंडरर का पूरा उदाहरण देखें

TypeScript

import { MarkerClusterer, ClusterStats } from '@googlemaps/markerclusterer';

async function init() {
    // Request needed libraries.
    const [{ InfoWindow }, { AdvancedMarkerElement, PinElement }] =
        await Promise.all([
            google.maps.importLibrary('maps'),
            google.maps.importLibrary('marker'),
        ]);

    await customElements.whenDefined('gmp-map');

    const mapElement =
        document.querySelector<google.maps.MapElement>('gmp-map')!;
    const innerMap = mapElement.innerMap;

    const infoWindow = new 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 PinElement({
            glyphText: label,
            glyphColor: 'white',
        });

        const marker = new AdvancedMarkerElement({
            position,
            content: pinGlyph,
            gmpClickable: true,
        });

        marker.addEventListener('gmp-click', () => {
            const content = document.createElement('div');
            content.textContent = `${String(position.lat)}, ${String(position.lng)}`;
            infoWindow.setContent(content);

            infoWindow.open({
                anchor: marker,
                map: innerMap,
            });
        });
        return marker;
    });

    // Customize the cluster icons using a custom Renderer
    const renderer = {
        render: (
            {
                count,
                position,
            }: { count: number; position: google.maps.LatLng },
            stats: ClusterStats
        ) => {
            // Change color based on the number of markers in the cluster relative to the mean
            const isLargeCluster =
                count > Math.max(10, stats.clusters.markers.mean);
            const clusterClass = isLargeCluster
                ? 'large-cluster'
                : 'small-cluster';

            // Build the HTML content for the Advanced Marker
            const content = document.createElement('div');
            content.classList.add('custom-cluster-icon', clusterClass);
            content.textContent = String(count);

            return new AdvancedMarkerElement({
                position,
                content,
                // Adjust zIndex to be above other markers
                zIndex: 1000 + count,
            });
        },
    };

    // Add a marker clusterer to manage the markers.
    new MarkerClusterer({ markers, map: innerMap, renderer });
}

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

void init();

JavaScript

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

async function init() {
    // Request needed libraries.
    const [{ InfoWindow }, { AdvancedMarkerElement, PinElement }] =
        await Promise.all([
            google.maps.importLibrary('maps'),
            google.maps.importLibrary('marker'),
        ]);

    await customElements.whenDefined('gmp-map');

    const mapElement = document.querySelector('gmp-map');
    const innerMap = mapElement.innerMap;

    const infoWindow = new 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 PinElement({
            glyphText: label,
            glyphColor: 'white',
        });

        const marker = new AdvancedMarkerElement({
            position,
            content: pinGlyph,
            gmpClickable: true,
        });

        marker.addEventListener('gmp-click', () => {
            const content = document.createElement('div');
            content.textContent = `${String(position.lat)}, ${String(position.lng)}`;
            infoWindow.setContent(content);

            infoWindow.open({
                anchor: marker,
                map: innerMap,
            });
        });
        return marker;
    });

    // Customize the cluster icons using a custom Renderer
    const renderer = {
        render: ({ count, position }, stats) => {
            // Change color based on the number of markers in the cluster relative to the mean
            const isLargeCluster =
                count > Math.max(10, stats.clusters.markers.mean);
            const clusterClass = isLargeCluster
                ? 'large-cluster'
                : 'small-cluster';

            // Build the HTML content for the Advanced Marker
            const content = document.createElement('div');
            content.classList.add('custom-cluster-icon', clusterClass);
            content.textContent = String(count);

            return new AdvancedMarkerElement({
                position,
                content,
                // Adjust zIndex to be above other markers
                zIndex: 1000 + count,
            });
        },
    };

    // Add a marker clusterer to manage the markers.
    new MarkerClusterer({ markers, map: innerMap, renderer });
}

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

void init();

CSS

html,
body,
gmp-map {
    height: 100%;
    margin: 0;
    padding: 0;
}

.custom-cluster-icon {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 2px solid white;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bold;
    font-size: 14px;
    font-family: sans-serif;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.large-cluster {
    background-color: #ff0000;
}

.small-cluster {
    background-color: #0000ff;
}

HTML

<html>
    <head>
        <title>marker-clustering-custom</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (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: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <gmp-map
            center="-28.024, 140.887"
            zoom="3"
            map-id="DEMO_MAP_ID"></gmp-map>
    </body>
</html>

रेंडरर के अन्य उदाहरण देखने के लिए, रेंडरर के इस्तेमाल का डेमो देखें.

क्लस्टरिंग एल्गोरिदम में बदलाव करना

डिफ़ॉल्ट रूप से, MarkerClusterer इस्तेमाल करता है SuperClusterAlgorithm. यह k-d ट्री का इस्तेमाल करके, मार्कर को क्लस्टर में जोड़ता है. क्लस्टरिंग के व्यवहार को पसंद के मुताबिक बनाने के लिए, एल्गोरिदम इंस्टेंस को algorithm विकल्प में पास करें. इसके अलावा, डिफ़ॉल्ट एल्गोरिदम के लिए विकल्प, algorithmOptions में पास करें.

लाइब्रेरी में, ये इन-बिल्ट एल्गोरिदम शामिल हैं:

  • SuperClusterAlgorithm (डिफ़ॉल्ट): k-d ट्री का इस्तेमाल करके, जियोस्पेशल पॉइंट क्लस्टरिंग की सुविधा तेज़ी से मिलती है. आम तौर पर इस्तेमाल किए जाने वाले विकल्पों में ये शामिल हैं:
    • maxZoom: यह ज़्यादा से ज़्यादा ज़ूम करने का लेवल है, जिस पर क्लस्टर जनरेट होते हैं (डिफ़ॉल्ट: 16). maxZoom से ज़्यादा ज़ूम करने के लेवल पर, अलग-अलग मार्कर बिना क्लस्टरिंग के दिखते हैं.
    • radius: यह क्लस्टर का रेडियस पिक्सल में होता है (डिफ़ॉल्ट: 60).
    • minPoints: यह मार्कर की वह कम से कम संख्या है जो क्लस्टर बनाने के लिए ज़रूरी होती है (डिफ़ॉल्ट: 2).
  • SuperClusterViewportAlgorithm: यह SuperClusterAlgorithm का व्यूपोर्ट-फ़िल्टर किया गया वैरिएंट है. यह सिर्फ़ मौजूदा मैप व्यूपोर्ट में मौजूद मार्कर को क्लस्टर में जोड़ता है. इसके अलावा, इसमें पिक्सल पैडिंग (viewportPadding, डिफ़ॉल्ट: 60) भी शामिल होती है.
  • GridAlgorithm: यह ग्रिड पर आधारित क्लस्टरिंग एल्गोरिदम है. आम तौर पर इस्तेमाल किए जाने वाले विकल्पों में, maxZoom (डिफ़ॉल्ट: 16), gridSize (ग्रिड साइज़ पिक्सल में, डिफ़ॉल्ट: 40), और maxDistance (क्लस्टर सेंटर और मार्कर के बीच की ज़्यादा से ज़्यादा दूरी मीटर में, डिफ़ॉल्ट: 40000) शामिल हैं.
  • NoopAlgorithm: यह सभी मार्कर को बिना क्लस्टरिंग के रेंडर करता है.

यहां दिए गए उदाहरण में, SuperClusterAlgorithm को कस्टम radius और maxZoom के साथ कॉन्फ़िगर किया गया है:

import {MarkerClusterer, SuperClusterAlgorithm} from '@googlemaps/markerclusterer';

const markerCluster = new MarkerClusterer({
  map,
  markers,
  algorithm: new SuperClusterAlgorithm({
    radius: 80,
    maxZoom: 15,
  }),
});

अलग-अलग एल्गोरिदम के काम करने के तरीके की तुलना करने के लिए, एल्गोरिदम की तुलना का डेमो देखें.

क्लस्टर पर क्लिक करने के व्यवहार को पसंद के मुताबिक बनाना

डिफ़ॉल्ट रूप से, क्लस्टर मार्कर पर क्लिक करने पर, मैप व्यू पोर्ट को क्लिक किए गए क्लस्टर की सीमाओं के हिसाब से फ़िट किया जाता है (map.fitBounds(cluster.bounds)). जब कोई उपयोगकर्ता क्लस्टर पर क्लिक करता है, तो क्या होता है, इसे पसंद के मुताबिक बनाने के लिए, onClusterClick विकल्प में कॉलबैक फ़ंक्शन पास करें:

const markerCluster = new MarkerClusterer({
  map,
  markers,
  onClusterClick: (event, cluster, map) => {
    // Zoom in by 2 levels centered on the cluster position
    map.setCenter(cluster.position);
    map.setZoom((map.getZoom() ?? 3) + 2);
  },
});

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

GitHub पर मौजूद डेटाबेस में, मार्कर क्लस्टरिंग के ज़्यादा मुश्किल उदाहरण देखे जा सकते हैं. साथ ही, लाइब्रेरी के लिए रेफ़रंस दस्तावेज़ पढ़ा जा सकता है.