使用Ionic 3.19.0与cordova-plugin-googlemaps 2.1.1添加多标记及聚合异常问询

嘿，看起来你在Ionic 3 + Google Maps插件的开发中遇到了几个棘手的问题，我来帮你逐个梳理原因和解决方案：

问题1：addMarker添加超过5个标记时程序崩溃 #

核心原因：

1. 数据引用错误：你在请求服务中复用了全局的test_data对象，循环中每次赋值lat和lng时，所有推入data数组的元素都会指向同一个对象引用，导致数据混乱，插件处理时出现异常。
2. 异步并发过载：循环中逐个发起请求并添加标记，短时间内大量异步操作可能超出插件的处理能力，引发崩溃且错误被吞掉。

修复方案：

第一步：修正请求服务的数据生成逻辑

每次循环创建新的位置对象，避免引用复用，同时简化JSON解析流程：

getPositions(ids): Observable<TrackerPositionData[]>{
  // 直接设置responseType为json，无需手动parse
  return this.http.post('http://localhost:3000/positions', { ids: ids }, { responseType:'json' })
    .map(res => {
      // 用数组map方法更简洁地生成位置数据
      return res.map(item => ({
        lat: item[this.key.LATITUDE][this.key.VAL],
        lng: item[this.key.LONGITUDE][this.key.VAL]
      }));
    })
    .catch((err) => {
      console.error('请求位置数据失败:', err);
      return throwError(() => err); // 正确抛出错误，便于排查
    });
}

第二步：批量处理请求与标记添加

用forkJoin并发请求所有位置数据，一次性收集所有标记后再批量添加，避免并发过载：

showLastPositionsOnMap(){
  // 生成所有ID对应的请求Observable数组
  const positionRequests = this.ids.map(id => this.getEvent.getPositions(id));
  
  // 并发请求所有数据
  forkJoin(positionRequests).subscribe(allResponses => {
    // 扁平化所有响应，收集标记配置
    const allMarkers = allResponses.flatMap(response => {
      return response.map(pos => ({
        position: new LatLng(pos.lat, pos.lng),
        name: "Test",
        address: "Test",
        phone: "999-999-999",
        icon: "assets/img/pin.png" // 修正路径：去掉www，Ionic打包后assets是根目录下的资源
      }));
    });

    // 批量添加标记（也可直接用于聚合）
    allMarkers.forEach(markerOpts => {
      this.map.addMarker(markerOpts).catch(err => console.error('单个标记添加失败:', err));
    });
  }, err => {
    console.error('批量请求位置数据失败:', err);
  });
}

问题2：100+位置数据的API请求有时失败 #

核心原因：

• 请求超时：批量数据请求可能因后端处理慢超出默认超时时间
• 后端限流：部分后端会限制单次请求的参数数量或频率
• 错误被吞掉：原代码中catch((err, caught) => caught)会吞掉错误，无法排查具体失败原因

修复方案：

1. 添加请求超时配置：

import { timeout } from 'rxjs/operators';

getPositions(ids): Observable<TrackerPositionData[]>{
  return this.http.post('http://localhost:3000/positions', { ids: ids }, { responseType:'json' })
    .pipe(timeout(15000)) // 设置15秒超时，根据实际情况调整
    .map(res => {
      return res.map(item => ({
        lat: item[this.key.LATITUDE][this.key.VAL],
        lng: item[this.key.LONGITUDE][this.key.VAL]
      }));
    })
    .catch((err) => {
      console.error('请求位置数据失败:', err);
      return throwError(() => err);
    });
}

2. 分批处理请求：如果后端有限流，将100+ID分成多批请求：

// 拆分ID为批量数组，每批20个
splitIntoBatches(ids: any[], batchSize: number = 20): any[][] {
  const batches = [];
  for (let i = 0; i < ids.length; i += batchSize) {
    batches.push(ids.slice(i, i + batchSize));
  }
  return batches;
}

// 修改showLastPositionsOnMap使用分批请求
showLastPositionsOnMap(){
  const idBatches = this.splitIntoBatches(this.ids);
  const batchRequests = idBatches.map(batch => this.getEvent.getPositions(batch));
  
  // 按顺序发起分批请求（避免同时打满后端）
  concat(...batchRequests).subscribe(response => {
    // 处理每批数据并添加标记
    const markers = response.map(pos => ({
      position: new LatLng(pos.lat, pos.lng),
      name: "Test",
      address: "Test",
      phone: "999-999-999",
      icon: "assets/img/pin.png"
    }));
    markers.forEach(opt => this.map.addMarker(opt));
  }, err => {
    console.error('分批请求失败:', err);
  });
}

问题3：addMarkerCluster聚合组件无法显示 #

核心原因：

1. 单次仅传入单个标记：聚合组件需要多个标记才会触发聚合显示，你原代码中循环每次只传一个标记，无法触发聚合逻辑。
2. 资源路径错误：原路径www/assets/img/pin.png在Ionic打包后无法被插件正确识别，需去掉www前缀。
3. 地图就绪状态判断缺失：异步请求返回后，可能地图实例未完全初始化完成。

修复方案：

在批量收集所有标记后，一次性传入addMarkerCluster：

showLastPositionsOnMap(){
  const positionRequests = this.ids.map(id => this.getEvent.getPositions(id));
  
  forkJoin(positionRequests).subscribe(allResponses => {
    const allMarkers = allResponses.flatMap(response => {
      return response.map(pos => ({
        position: new LatLng(pos.lat, pos.lng),
        name: "Test",
        address: "Test",
        phone: "999-999-999",
        icon: "assets/img/pin.png"
      }));
    });

    // 确保地图实例有效后添加聚合
    if (this.map && this.map.getNativeMap()) {
      const clusterOpts = {
        markers: allMarkers, // 一次性传入所有标记
        icons: [
          {icon: "assets/img/pin.png", min: 2, max: 10},
          {icon: "assets/img/pin.png", min: 11, max: 30},
          {icon: "assets/img/pin.png", min: 31},
        ],
      };

      this.map.addMarkerCluster(clusterOpts)
        .then(cluster => {
          console.log('聚合组件添加成功');
          // 可选：监听聚合标记点击事件
          cluster.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
            console.log('聚合标记被点击');
          });
        })
        .catch(err => console.error('聚合组件添加失败:', err));
    }
  }, err => {
    console.error('批量请求失败:', err);
  });
}

额外建议： #

• 测试时尽量使用真机而非浏览器：Google Maps Cordova插件的很多功能（包括聚合）在浏览器环境中兼容性较差。
• 地图初始化时先刷新布局再加载标记：确保地图渲染完成后再添加元素，避免布局偏移。

内容的提问来源于stack exchange，提问作者spaceman