加载聚合Marker

芋圆社区 > 编程 > 天地图 > 加载聚合Marker

923

2023-08-24

Hey、小怪兽

• 如果想用聚合点位的话，就不能添加海量点，而是添加Marker，首先定义两个变量：

// 聚合点
let pointClusterLayer = null;
// 搜索的点位
let searchPointArr = [];

• 添加点位：

if (points.length > 0) {
  points.map((point) => {
    const marker = new T.Marker(new T.LngLat(point.lonlat.split(" ")[0], point.lonlat.split(" ")[1]), {
      title: point.name,
    });
    searchPointArr.push(marker);
  });
}

• 聚合点的话直接将这个都是Marker点位的数组给MarkerClusterer就行了：

// 聚合点
pointClusterLayer = new T.MarkerClusterer(map, { markers: searchPointArr });

• 搜索北京大学：
• 这里清空聚合点就没办法用map.clearOverLays()，需要用到聚合点的方法，清空了聚合点里的Markers并且也移除了Markers，最后设置聚合点为null，搜索的数组为空数组：

// 搜索前需要清空之前的点位
if (pointClusterLayer) {
  pointClusterLayer.clearMarkers();
  pointClusterLayer.removeMarkers(searchPointArr);
  pointClusterLayer = null;
}
searchPointArr = [];

• 完整代码：

// 搜索的回调函数
const localSearchResult = (result) => {
  console.log("搜索结果", result);

  // 获取搜索结果的类型
  const resultType = parseInt(result.getResultType());

  // 如果是点位搜索
  if (resultType === 1) {
    const points = result.getPois();
    console.log("搜索到的点位信息", points);
    // 搜索前需要清空之前的点位
    if (pointClusterLayer) {
      pointClusterLayer.clearMarkers();
      pointClusterLayer.removeMarkers(searchPointArr);
      pointClusterLayer = null;
    }
    searchPointArr = [];

    // 添加点位Marker
    if (points.length > 0) {
      points.map((point) => {
        const marker = new T.Marker(new T.LngLat(point.lonlat.split(" ")[0], point.lonlat.split(" ")[1]), {
          title: point.name,
        });

        searchPointArr.push(marker);
      });
    }

    // 聚合点
    pointClusterLayer = new T.MarkerClusterer(map, { markers: searchPointArr });
  } else if (resultType === 3) {
    // 地方行政搜索
    const area = result.getArea();
    console.log("搜索到的区域信息", area);
  } else {
    console.log("不支持其他类型的搜索，搜索类型为", resultType);
  }
};

上一篇：海量点加载

下一篇：添加事件和信息窗口

加载聚合Marker

回复