HERE Maps绘制用户行进轨迹折线遇Polyline.setGeometry参数无效错误

你遇到的Polyline.setGeometry invalid argument error核心原因是从未创建过H.map.Polyline实例，代码全程使用routePassedLine但没有初始化它，HERE API自然会抛出参数无效的错误。另外代码里还有几处冗余和不合理的地方，一起给你修正：

核心问题及修正点 #

• 必须先初始化H.map.Polyline实例才能调用setGeometry方法
• 移除重复创建的defaultLayers对象
• 调整地图缩放值到合理范围（HERE地图最大缩放级别约为20）
• 简化DomMarker的冗余回调逻辑
• 优化折线更新流程，无需反复移除再添加地图对象

修正后的完整代码 #

navigator.geolocation.getCurrentPosition(
  (position) => {
    const startingLat = position.coords.latitude;
    const startingLong = position.coords.longitude;
    const routePassedString = new H.geo.LineString();
    routePassedString.pushPoint({ lat: startingLat, lng: startingLong });

    // 仅创建一次地图图层
    const defaultLayers = platform.createDefaultLayers();
    const mapContainer = document.getElementById("mapContainer");
    
    // 调整zoom至合理值，避免超出地图支持范围
    const map = new H.Map(mapContainer, defaultLayers.vector.normal.map, {
      center: { lat: startingLat, lng: startingLong },
      zoom: 18,
      pixelRatio: window.devicePixelRatio || 1
    });

    // 关键：初始化折线实例，设置样式
    const routePassedLine = new H.map.Polyline(routePassedString, {
      style: { strokeColor: "#ff0000", lineWidth: 3 }
    });
    map.addObject(routePassedLine);

    window.addEventListener('resize', () => map.getViewPort().resize());
    const behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
    const ui = H.ui.UI.createDefault(map, defaultLayers);

    // 简化定位标记的DOM元素创建
    const startIconElement = document.createElement('div');
    startIconElement.style.margin = '-7.5px 0 0 -7.5px'; // 居中定位
    startIconElement.style.backgroundColor = 'darkorange';
    startIconElement.style.width = '15px';
    startIconElement.style.height = '15px';
    startIconElement.style.borderRadius = '50%'; // 改为圆形标记更直观

    const startMarker = new H.map.DomMarker(
      { lat: startingLat, lng: startingLong },
      { icon: new H.map.DomIcon(startIconElement) }
    );

    // 用模板字符串优化标记弹窗内容
    startMarker.setData(`
      <div><b>当前位置</b></div>
      <div><b>纬度:</b> ${startingLat}</div>
      <div><b>经度:</b> ${startingLong}</div>
    `);
    map.addObject(startMarker);

    // 优化位置更新逻辑，添加错误处理
    setInterval(() => {
      navigator.geolocation.getCurrentPosition(
        (pos) => {
          const newLat = pos.coords.latitude;
          const newLng = pos.coords.longitude;
          
          // 添加新坐标到线路集合
          routePassedString.pushPoint({ lat: newLat, lng: newLng });
          
          // 直接更新折线几何数据，无需反复移除添加
          routePassedLine.setGeometry(routePassedString);
          
          // 更新标记位置及弹窗内容
          startMarker.setGeometry({ lat: newLat, lng: newLng });
          startMarker.setData(`
            <div><b>当前位置</b></div>
            <div><b>纬度:</b> ${newLat}</div>
            <div><b>经度:</b> ${newLng}</div>
          `);
        },
        (error) => {
          console.error("获取位置失败:", error);
        },
        { enableHighAccuracy: true, timeout: 5000 }
      );
    }, 3000); // 调整为3秒一次更新，避免过度请求地理定位
  },
  (error) => {
    console.error("初始位置获取失败:", error);
  }
);

关键修改说明 #

1. 初始化折线实例：新增const routePassedLine = new H.map.Polyline(...)，这是解决报错的核心——只有存在有效的Polyline对象，setGeometry方法才能正常调用。
2. 精简冗余代码：删除重复创建的defaultLayers，移除DomMarker中无意义的onAttach/onDetach回调。
3. 优化地图参数：将zoom改为18，符合HERE地图的缩放范围；给定位标记添加圆形样式，更符合用户对定位点的视觉认知。
4. 简化更新流程：无需每次移除再添加折线对象，直接调用setGeometry更新数据，提升性能。
5. 添加错误处理：给地理定位请求添加错误回调，方便调试定位失败的场景。

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