HERE MAP如何在polyline点击位置准确新增点位实现道路拖拽编辑

pushPoints 本身是追加方法，只会把传入的点位加到线串坐标数组的末尾，不会自动匹配插入位置，直接调用必然出现点位跑到线尾的问题。你遇到的点位错位核心原因是没有提前计算点击位置对应的线段位置，直接调用点位新增接口，或是坐标格式、插入索引计算错误。

实现步骤 #

• 先计算插入位置索引：拿到点击坐标后，遍历折线所有相邻点位组成的线段，计算点击坐标到每一段的距离，找到距离最小的线段，记录该线段的起始点位索引，新点位需要插在这个索引的后一位。
• 提取原始坐标数组：调用polyline.getGeometry().getCoordinates()获取当前线串的完整坐标列表，不要直接在原数组上修改，先拷贝一份新数组操作避免原数据污染。
• 插入新坐标：用数组原生splice方法，把点击得到的经纬度坐标插入到刚才计算出的索引位置，注意坐标格式要和原有坐标保持一致，3.x版本API默认坐标顺序是[纬度, 经度, 海拔]，经纬度写反会直接导致点位飘到完全错误的位置。
• 更新折线几何：用插入完成的新坐标数组实例化新的H.geo.LineString对象，调用polyline.setGeometry()传入新的线串完成更新，不要用局部点位修改接口，全量替换几何不会出现局部坐标偏移问题。

避坑提示 #

• 计算点到线段距离时，不要直接用经纬度做平面距离计算，先调用API自带的map.geoToScreen()方法把经纬度转成屏幕像素坐标再计算距离，匹配到的线段位置误差会小很多。
• 如果后续要实现拖拽改线的功能，插点完成后可以给每个点位绑定拖拽监听，拖拽过程中实时更新坐标数组对应索引的坐标值，再调用setGeometry刷新即可实现流畅的拖拽编辑效果。

核心逻辑代码参考 #

function insertPointOnPolyline(polyline, clickPoint, map) {
  // 获取原始线串坐标
  const originCoords = polyline.getGeometry().getCoordinates();
  let minDist = Number.MAX_VALUE;
  let insertPos = 0;

  // 遍历查找距离点击位置最近的线段
  for (let i = 0; i < originCoords.length - 1; i++) {
    // 坐标转屏幕像素降低计算误差
    const screenP1 = map.geoToScreen({lat: originCoords[i][0], lng: originCoords[i][1]});
    const screenP2 = map.geoToScreen({lat: originCoords[i+1][0], lng: originCoords[i+1][1]});
    const screenClick = map.geoToScreen(clickPoint);
    // 替换成你自己实现的点到线段像素距离计算函数
    const currentDist = getPointToSegDist(screenClick, screenP1, screenP2);
    if (currentDist < minDist) {
      minDist = currentDist;
      insertPos = i;
    }
  }

  // 拷贝数组插入新点
  const newCoords = [...originCoords];
  newCoords.splice(insertPos + 1, 0, [clickPoint.lat, clickPoint.lng]);

  // 更新几何
  const newLineStr = new H.geo.LineString(newCoords);
  polyline.setGeometry(newLineStr);
}

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