Here Maps JavaScript聚类功能报Coordinates out of bounds错误求助

你好呀！刚看完你的代码，能理解作为Here Maps新手遇到问题的困惑，我帮你梳理几个大概率导致坐标越界或者聚类异常的问题，咱们一步步调整：

1. 坐标路径匹配错误 #

从你addToMapMarker里的代码能看到，单个POI的坐标是存在Poi.location.latitude里的，但在startClustering生成DataPoint时，你直接写了item.latitude——这会导致取不到有效坐标，要么是undefined，要么是错误值，自然会触发坐标越界的报错！

2. 函数参数传递错误 #

你的startClustering函数定义里第二个参数是Poi（单个点），但函数里却用了Poi.map来遍历生成DataPoint——单个对象根本没有map方法呀！而且你在addToMapMarker里明明传的是完整的POIs数组，这明显是参数名起错了，导致逻辑混乱。

3. 重复添加聚类图层 #

你在startClustering里先后调用了map.getLayers().add(clusteringLayer)和map.addLayer(clusteringLayer)，这会把同一个图层重复添加到地图上，不仅冗余还可能导致地图渲染异常，只需要保留其中一次调用就行。

4. 无效边界导致视野设置出错 #

你直接用聚类后的根组边界设置地图视野，如果前面的坐标有问题，生成的边界是无效的，也会触发越界错误，最好先判断边界是否有效再设置。

修正后的代码示例 #

// 单个POI添加（如果不需要单独显示单个标记可以删掉这段）
addToMapMarker(Poi, POIs) {
  console.log(Poi);
  const cord = { lat: Poi.location.latitude, lng: Poi.location.longitude };
  const parisMarker = new H.map.Marker(cord);
  this.hereMap.addObject(parisMarker);
  
  // 调用聚类函数，确保传的是完整POIs数组
  this.startClustering(this.hereMap, POIs, cord);
}

// 修正后的聚类函数
startClustering(map, POIs, cord) {
  // 正确获取每个POI的location下的经纬度，同时过滤无效坐标
  const dataPoints = POIs.map(function(item) {
    if (item.location?.latitude && item.location?.longitude) {
      // 额外判断坐标是否在有效范围内
      const lat = Number(item.location.latitude);
      const lng = Number(item.location.longitude);
      if (lat >= -90 && lat <=90 && lng >=-180 && lng <=180) {
        return new H.clustering.DataPoint(lat, lng);
      }
    }
    return null;
  }).filter(point => point !== null);

  // 如果没有有效数据点，直接返回避免报错
  if (dataPoints.length === 0) {
    console.warn("没有有效坐标点可聚类");
    return;
  }

  this.hereMap.setCenter(cord);

  const clusteredDataProvider = new H.clustering.Provider(dataPoints, {
    clusteringOptions: {
      eps: 30,
      minWeight: 2
    }
  });

  const clusteringLayer = new H.map.layer.ObjectLayer(clusteredDataProvider);
  
  // 只添加一次图层
  map.addLayer(clusteringLayer);

  // 先判断边界是否有效再设置视野
  const bounds = clusteredDataProvider.getRootGroup().getBoundingBox();
  if (bounds) {
    map.getViewModel().setLookAtData({ bounds: bounds });
  }
}

另外你可以额外检查下你的POIs数组里的每个对象，确保location.latitude和location.longitude都是可以转成数字的有效数值，且在经纬度的合法范围内（纬度-90到90，经度-180到180），如果有超出范围的数值也会触发坐标越界的错误哦！

备注：内容来源于stack exchange，提问作者Shilpa