實例方法
專門支援資料與渲染器的動態更新,調用 new mapPlus.DynamicCluster(options),開始使用動態叢集圖。
| 實例方法 | 描述 |
|---|---|
| setData | 設定資料,並更新動態叢集。 |
| setMarkerRenderer | 設定地標渲染器,並更新動態叢集。 |
| setOnClusterClick | 設定叢集圖點選事件。 |
| setOnMarkerClick | 設定地標點選事件。 |
| remove | 移除動態叢集。 |
setData
setData(data)
設定資料,並更新動態叢集。
範例
const dynamicCluster = new mapPlus.DynamicCluster({ markerRenderer,});
const data = [ { id: 'a', position: [121.52012916930945, 25.029326932236182] }, { id: 'b', position: [121.52412916930945, 25.026326932236182] }, { id: 'c', position: [121.52612916930945, 25.027326932236182] }, { id: 'd', position: [121.52812916930945, 25.025326932236182] }, { id: 'e', position: [121.53012916930945, 25.022326932236182] },];
// 設定資料dynamicCluster.setData(data);setMarkerRenderer
setMarkerRenderer(renderer)
設定地標渲染器,並更新動態叢集。
範例
const dynamicCluster = new mapPlus.DynamicCluster({ data,});
// 設定地標渲染器dynamicCluster.setMarkerRenderer(({ id, position }) => { return { key: id, position, };})setOnClusterClick
setOnClusterClick(clusterClickHandler)
設定叢集圖點選事件。
範例
const dynamicCluster = new mapPlus.DynamicCluster({ data, markerRenderer,});
// 設定叢集圖點選事件dynamicCluster.setOnClusterClick(({ properties }) => { const { point_count } = properties; alert('一共有' + point_count + '個地標在這裡!');});setOnMarkerClick
setOnMarkerClick(markerClickHandler)
設定地標點選事件。
範例
const data = [ { id: 'a', position: [121.52012916930945, 25.029326932236182] }, { id: 'b', position: [121.52412916930945, 25.026326932236182] }, { id: 'c', position: [121.52612916930945, 25.027326932236182] }, { id: 'd', position: [121.52812916930945, 25.025326932236182] }, { id: 'e', position: [121.53012916930945, 25.022326932236182] },];
const dynamicCluster = new mapPlus.DynamicCluster({ data, markerRenderer,});
// 設定地標點選事件dynamicCluster.setOnMarkerClick(({ event , marker , options }) => { const infoWindow = new mapPlus.InfoWindow({ content: `This is ${options.id}`, }); infoWindow.open({ anchor: marker });});remove
remove()
移除動態叢集。
範例
const dynamicCluster = new mapPlus.DynamicCluster({ data, markerRenderer,});
// 移除動態叢集dynamicCluster.remove();