简介
marker-clusterer-v3-innoto 是一个用于在 Google 地图上进行点聚合的 npm 包，它支持多种参数自定义和事件触发，适用于需要对地图上大量点进行聚合的场景。
安装和引用
首先，你需要安装并引用 marker-clusterer-v3-innoto，可以使用 npm 或 yarn 安装：
npm install marker-clusterer-v3-innoto # 或 yarn add marker-clusterer-v3-innoto
然后在你的项目中引入 MarkerClusterer 类：
import MarkerClusterer from 'marker-clusterer-v3-innoto';
参数配置
下面详细介绍 marker-clusterer-v3-innoto 的参数配置。
gridSize
gridSize 控制聚合的像素半径大小，它是个整数，且默认值为 60。
const markerClusterer = new MarkerClusterer(map, markers, {
gridSize: 80, // 将 gridSize 设置为 80
});maxZoom
maxZoom 控制聚合的最大缩放级别，当地图缩放大于该级别时，聚合的点会被解散成单个点。默认值为 18。
const markerClusterer = new MarkerClusterer(map, markers, {
maxZoom: 15, // 将 maxZoom 设置为 15
});styles
styles 控制聚合点的样式，类型为数组，每个数组元素对应一个聚合级别，从 0 开始计数。每个元素是一个对象，包含以下属性：
- url: 图片地址，必选。
- height: 图片高度，可选。
- width: 图片宽度，可选。
- anchor: 图片的锚点位置，可选，默认为图片中心点。
-- -------------------- ---- -------
----- --------------- - --- -------------------- -------- -
------- -
-
---- ---------------------------------------------------------------------------------------------
------- ---
------ ---
------- ---- ---
--
-
---- ---------------------------------------------------------------------------------------------
------- ---
------ ---
------- ---- ---
--
-- ---
--
---zoomOnClick
zoomOnClick 控制点击聚合点时是否放大地图以显示单独的点，默认为 true。
const markerClusterer = new MarkerClusterer(map, markers, {
zoomOnClick: false, // 点击聚合点时不再放大地图
});minimumClusterSize
minimumClusterSize 控制当聚合点数量小于该值时不再进行聚合，默认为 2。
const markerClusterer = new MarkerClusterer(map, markers, {
minimumClusterSize: 10, // 将 minimumClusterSize 设置为 10
});imagePath
imagePath 是一个包含聚合点图标的图片地址。
const markerClusterer = new MarkerClusterer(map, markers, {
imagePath: 'https://developers.google.cn/maps/documentation/javascript/examples/markerclusterer/m',
});事件处理
marker-clusterer-v3-innoto 提供了多种事件处理，可以对聚合点进行一系列的自定义和操作。
click
click 事件会在聚合点被点击时触发，回调函数包含一个参数，类型为 MarkerCluster。
markerClusterer.addListener('click', function(markerCluster) {
console.log('点击聚合点', markerCluster);
});clusterclick
clusterclick 事件会在聚合点被点击时触发，回调函数包含一个参数，类型为 MarkerCluster。
markerClusterer.addListener('clusterclick', function(markerCluster) {
console.log('点击聚合点', markerCluster);
});clustermouseover
clustermouseover 事件会在鼠标移动到聚合点时触发，回调函数包含一个参数，类型为 MarkerCluster。
markerClusterer.addListener('clustermouseover', function(markerCluster) {
console.log('鼠标移到聚合点', markerCluster);
});clustermouseout
clustermouseout 事件会在鼠标移开聚合点时触发，回调函数包含一个参数，类型为 MarkerCluster。
markerClusterer.addListener('clustermouseout', function(markerCluster) {
console.log('鼠标移开聚合点', markerCluster);
});示例代码
下面是一个完整的 marker-clusterer-v3-innoto 使用示例，包含了参数配置和事件处理：
-- -------------------- ---- -------
--------- -----
------
------
--------------------------------- ------------
-------
-----
-----
---- -
------- -----
------- --
-------- --
-
--------
-------
------
---- ---------------
--------
-- ------- ------ -- --- ---
-------- --------- -
----- --- - --- ----------------------------------------------- -
----- ---
------- - ---- ------ ---- ------ --
---
-- --------
----- ------- - ---
--- ---- - - -- - - ----- ---- -
-------------
--- --------------------
--------- -
---- ----- - ------------- - ----
---- ------ - ------------- - ----
--
--
--
-
-- -- --------------- --
----- --------------- - --- -------------------- -------- -
--------- ---
-------- ---
------- -
-
---- ---------------------------------------------------------------------------------------------
------- ---
------ ---
------- ---- ---
--
-
---- ---------------------------------------------------------------------------------------------
------- ---
------ ---
------- ---- ---
--
-- ---
--
------------ ------
------------------- ---
---
-- ------
------------------------------------ ----------------------- -
-------------------- ---------------
---
------------------------------------------- ----------------------- -
-------------------- ---------------
---
----------------------------------------------- ----------------------- -
---------------------- ---------------
---
---------------------------------------------- ----------------------- -
---------------------- ---------------
---
-
---------
------- ------------------------------------------------------------------------------- ----- ---------------
------- --------------
------ --------------- ---- -----------------------------
---------
-------
-------结语
marker-clusterer-v3-innoto 是一个强大的点聚合工具，可以帮助我们简化地图上大量点的展示和操作。本文简单介绍了其基本使用方式和参数配置方式，希望能为大家的开发工作提供一些帮助和启发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005777c81e8991b448ead5f