如何消除Google Maps JavaScript绘制Polyline时的起始多余线段

Hey there! 我来帮你搞定这个烦人的多余线段问题😉

从你描述的情况来看，这条额外指向起点的线段，大概率是因为你的BeatPath坐标数组里重复包含了起点坐标，或者数组的首尾坐标完全一致导致的——Google Maps的Polyline会按顺序连接数组里的每一个点，如果首尾点重复，就会自动画出一条从最后一个点回到起点的闭合线，也就是你看到的红色错误线段。

下面给你具体的排查和解决步骤：

• 第一步：先确认坐标数组的问题
  先把BeatPath数组打印出来，看看是不是首尾坐标完全重复：

  console.log(BeatPath);
  

  重点核对第一个和最后一个元素的纬度、经度值（注意精度问题，比如是否都是39.9042这种完全一致的数值）。

• 第二步：移除重复的首尾点
  如果确实发现首尾点重复，只需要在创建Polyline之前删掉最后一个重复点就行：

  // 检查数组长度大于1，且首尾坐标完全一致
  if (BeatPath.length > 1 && 
      BeatPath[0].lat() === BeatPath[BeatPath.length - 1].lat() && 
      BeatPath[0].lng() === BeatPath[BeatPath.length - 1].lng()) {
    // 删除最后一个重复的起点
    BeatPath.pop();
  }
  
  // 再创建并渲染Polyline
  var flightPath = new google.maps.Polyline({ 
    path: BeatPath, 
    geodesic: true, 
    strokeColor: '#0077ff', 
    strokeOpacity: 1.0, 
    strokeWeight: 5 
  });
  flightPath.setMap(map);
  

• 额外排查方向：过滤无效坐标
  有时候如果BeatPath里混入了无效坐标（比如意外添加的null、未初始化的默认点），也可能导致奇怪的连线。可以先过滤掉数组里的无效点：

  // 过滤掉不符合格式的坐标点
  const validPath = BeatPath.filter(point => point && typeof point.lat === 'function' && typeof point.lng === 'function');
  
  var flightPath = new google.maps.Polyline({ 
    path: validPath, 
    geodesic: true, 
    strokeColor: '#0077ff', 
    strokeOpacity: 1.0, 
    strokeWeight: 5 
  });
  flightPath.setMap(map);
  

如果上面的方法都没用，再检查下是不是有其他代码重复调用了setMap(map)，或者在其他地方修改了BeatPath数组。不过最常见的原因还是首尾点重复，先从这个方向排查准没错~

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