Google Map Marker Clustering的使用方式與自訂標記

Google Map Marker Clustering是Google Map API的延伸套件，讓Google Map的標記在數量多的情況下，自動收合，簡化顯示，避免畫面雜亂，增加使用者體驗。

效果DEMO

安裝

npm

1
npm i @googlemaps/markerclusterer

CDN

1
<script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>

TypeScript 型別資料

1
npm i -D @types/google.maps

引入

模組

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { MarkerClusterer } from "@googlemaps/markerclusterer";

/* map 是google map的實體，
如 const map = new google.maps.Map(document.getElementById("map"), {zoom: 4,center: uluru}); */

/* markers 是所有的標記陣列，
如 [const marker = new google.maps.Marker({ lat: 25.0335796, lng: 121.5618487 });] */

/* algorithm 是演算法，可以到這裡
https://googlemaps.github.io/js-markerclusterer/public/algorithms/
尋找合適的算法
如 new markerClusterer.GridAlgorithm({})
*/
const markerCluster = new MarkerClusterer({ map, markers, algorithm });

CDN

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

自訂標記

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

// 在renderer中自訂渲染器
const markerCluster = new MarkerClusterer({ map, markers, algorithm, renderer: {
  render({ count, position }, stats) {
        // 圖標顏色
        const color = "#000";
        // 將svg轉換成base64，可自行更換圖檔
        const svg = window.btoa(`
          <svg fill="${color}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240">
            <circle cx="120" cy="120" opacity=".6" r="70" />
            <circle cx="120" cy="120" opacity=".3" r="90" />
            <circle cx="120" cy="120" opacity=".2" r="110" />
          </svg>
        `);
        return new google.maps.Marker({
            position,
            icon: {
                url: `data:image/svg+xml;base64,${svg}`,
                scaledSize: new google.maps.Size(50, 50),
            },
            // 文字樣式
            label: {
                text: String(count),
                color: "rgba(255,255,255,1)",
                fontSize: "12px",
            },
            title: `Cluster of ${count} markers`,
            // 圖層順序設定
            zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
        });
  }
}});

在這裡快速介紹一些基本的使用方式給大家，若需要更多的自訂功能請參考官方文件