การคลัสเตอร์เครื่องหมาย

เลือกแพลตฟอร์ม: Android iOS JavaScript

ภาพรวม

บทแนะนำนี้จะแสดงวิธีใช้การคลัสเตอร์เครื่องหมายเพื่อแสดงเครื่องหมายจำนวนมากบนแผนที่ คุณสามารถใช้ @googlemaps/markerclusterer ไลบรารีร่วมกับ Maps JavaScript API เพื่อรวม เครื่องหมายที่อยู่ใกล้เคียงกันเป็นคลัสเตอร์ และลดความซับซ้อนในการแสดงเครื่องหมาย บนแผนที่

หากต้องการดูวิธีการทำงานของการคลัสเตอร์เครื่องหมาย ให้ดูแผนที่ต่อไปนี้

ตัวเลขบนคลัสเตอร์จะระบุจำนวนเครื่องหมายที่คลัสเตอร์นั้นมี โปรดสังเกตว่าเมื่อคุณซูมเข้าไปในตำแหน่งคลัสเตอร์ใดก็ตาม ตัวเลขบนคลัสเตอร์จะลดลง และคุณจะเริ่มเห็นเครื่องหมายแต่ละรายการบนแผนที่ การซูมออกจากแผนที่จะรวมเครื่องหมายเป็นคลัสเตอร์อีกครั้ง

ตัวอย่างต่อไปนี้แสดงโค้ดทั้งหมดที่คุณต้องใช้เพื่อสร้างแผนที่นี้

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. เพิ่มไลบรารีการคลัสเตอร์เครื่องหมายลงในหน้าหรือแอปพลิเคชัน ไลบรารีพร้อมให้บริการใน NPM ที่ @googlemaps/markerclusterer และใน ที่เก็บใน GitHub เลือกตัวเลือกใดตัวเลือกหนึ่งต่อไปนี้เพื่อติดตั้งไลบรารี

    NPM

    ติดตั้งไลบรารี @googlemaps/markerclusterer โดยใช้ NPM

    npm install @googlemaps/markerclusterer

    CDN

    สคริปต์ต่อไปนี้จะโหลดไลบรารีจาก CDN ของ unpkg.com

    <script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>
  2. เพิ่มการคลัสเตอร์เครื่องหมายในแอป

    โค้ดต่อไปนี้จะเพิ่ม MarkerClusterer ลงในแผนที่ เลือกตัวเลือกใดตัวเลือกหนึ่งต่อไปนี้

    NPM

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

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

    CDN

    เมื่อเข้าถึงด้วย CDN ไลบรารีจะพร้อมให้บริการภายใต้ตัวแปรส่วนกลาง markerClusterer

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

    ตัวอย่างนี้จะส่งอาร์เรย์ markers ไปยัง MarkerClusterer

  3. (ไม่บังคับ) ปรับแต่งการคลัสเตอร์เครื่องหมาย เพื่อเปลี่ยนลักษณะที่ปรากฏของไอคอนคลัสเตอร์ อัลกอริทึมการจัดกลุ่ม หรือลักษณะการทำงานเมื่อคลิก

ปรับแต่งการคลัสเตอร์เครื่องหมาย

คุณสามารถปรับแต่ง MarkerClusterer ได้โดยส่งตัวเลือกเพิ่มเติมใน MarkerClustererOptions ออบเจ็กต์เมื่อสร้างอินสแตนซ์ของ Clusterer:

  • renderer: ควบคุมวิธีแสดงเครื่องหมายคลัสเตอร์บนแผนที่
  • algorithm และ algorithmOptions: ควบคุมวิธีจัดกลุ่มเครื่องหมายเป็นคลัสเตอร์ตามระยะทางและระดับการซูม
  • onClusterClick: ลบล้างลักษณะการทำงานเริ่มต้นเมื่อผู้ใช้คลิกเครื่องหมายคลัสเตอร์

แผนที่ต่อไปนี้แสดงเครื่องหมายที่มีไอคอนคลัสเตอร์ที่กำหนดเอง

ปรับแต่งไอคอนคลัสเตอร์

โดยค่าเริ่มต้น MarkerClusterer จะใช้ 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 ที่กำหนดเองซึ่งสร้างป้าย HTML แบบวงกลมสำหรับ 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 });
}

ดูตัวอย่าง 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>

ดูตัวอย่าง Renderer เพิ่มเติมได้ที่ การสาธิตการใช้งาน Renderer

แก้ไขอัลกอริทึมการจัดกลุ่ม

โดยค่าเริ่มต้น MarkerClusterer จะใช้ SuperClusterAlgorithm, ซึ่งจัดกลุ่มเครื่องหมายโดยใช้ k-d tree คุณสามารถปรับแต่งลักษณะการทำงานของการจัดกลุ่มได้โดยส่งอินสแตนซ์ของอัลกอริทึมไปยังตัวเลือก algorithm หรือโดยส่งตัวเลือกสำหรับอัลกอริทึมเริ่มต้นไปยัง algorithmOptions

ไลบรารีมีอัลกอริทึมในตัวต่อไปนี้

  • SuperClusterAlgorithm (ค่าเริ่มต้น): การจัดกลุ่มจุดทางภูมิศาสตร์อย่างรวดเร็วโดยใช้ k-d tree ตัวเลือกทั่วไป ได้แก่
    • 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)) หากต้องการปรับแต่งสิ่งที่เกิดขึ้นเมื่อผู้ใช้คลิกคลัสเตอร์ ให้ส่งฟังก์ชัน Callback ไปยัง 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 และอ่าน เอกสารอ้างอิงสำหรับไลบรารี