Places UI Kit: ไลบรารีที่พร้อมใช้งานซึ่งช่วยให้นักพัฒนาซอฟต์แวร์ปรับแต่งและควบคุมได้ ลองใช้ดู แล้วแชร์ความคิดเห็นเกี่ยวกับประสบการณ์การใช้ UI Kit

Google ใช้เทคโนโลยี AI เพื่อแปลเนื้อหาเป็นภาษาที่คุณต้องการ การแปลโดย AI อาจมีข้อผิดพลาด

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

เลือกแพลตฟอร์ม: 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();index.ts

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

CSS

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

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

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

เพิ่มคลัสเตอร์ของมาร์กเกอร์

ทำตามขั้นตอนด้านล่างเพื่อเพิ่มคลัสเตอร์ของมาร์กเกอร์

เพิ่มไลบรารีการคลัสเตอร์เครื่องหมายลงในหน้าหรือแอปพลิเคชัน ไลบรารีพร้อมให้บริการใน NPM ที่ @googlemaps/markerclusterer และใน ที่เก็บใน GitHub
NPM

ติดตั้งไลบรารี @googlemaps/markerclusterer เวอร์ชันล่าสุดโดยใช้ NPM
```
npm install @googlemaps/markerclusterer
```
CDN

สคริปต์ด้านล่างจะโหลดไลบรารีเวอร์ชัน 2.x.x ล่าสุดจาก CDN ของ unpkg.com
```
<script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>
```
เพิ่มการคลัสเตอร์เครื่องหมายในแอป
โค้ดด้านล่างจะเพิ่มคลัสเตอร์ของมาร์กเกอร์ลงในแผนที่
NPM
```
import { MarkerClusterer } from "@googlemaps/markerclusterer";

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

เมื่อเข้าถึงด้วย CDN ไลบรารีจะพร้อมใช้งานภายใต้ส่วนกลาง markerClusterer
```
const markerCluster = new markerClusterer.MarkerClusterer({ markers, map });
```
ตัวอย่างนี้จะส่งอาร์เรย์ markers ไปยัง MarkerClusterer
ปรับแต่งการคลัสเตอร์เครื่องหมาย
- ปรับแต่งไอคอนคลัสเตอร์ผ่านอินเทอร์เฟซตัวแสดงผล
- แก้ไขอัลกอริทึมสำหรับการสร้างคลัสเตอร์

ดูข้อมูลเพิ่มเติม

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