Skip to main content

實例方法

實例方法描述
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();