如何动态缩短Google Map折线长度？控制折线最大点数方法

当然可以实现！核心思路是维护一个最多包含20个坐标点的数组，每次新增点时如果超过限制就移除最旧的起点，再动态更新折线的路径。下面结合你的代码片段，给出具体的实现方案：

首先，我们需要新增全局变量来存储折线点和折线实例，然后在初始化逻辑里创建折线，最后在标记移动时更新点数组并同步折线：

var map;
var pathPoints = []; // 专门存储折线坐标，最多保留20个点
var polyline; // 红色折线实例

function initialize() {
  var markLAT = coords[50].lat;
  var markLNG = coords[50].lng;
  
  map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(markLAT, markLNG),
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  // 初始化红色折线
  polyline = new google.maps.Polyline({
    path: pathPoints,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2
  });
  polyline.setMap(map);

  // 创建地图标记
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(markLAT, markLNG),
    map: map,
    title: "Moving Marker"
  });

  // 这里模拟标记移动的逻辑（你可以替换成实际的位置更新触发逻辑）
  let currentIndex = 50; // 从初始的第50个点开始
  setInterval(function() {
    // 按顺序取coords数组里的下一个点（循环遍历）
    currentIndex = (currentIndex + 1) % coords.length;
    var newLat = coords[currentIndex].lat;
    var newLng = coords[currentIndex].lng;
    var newPos = new google.maps.LatLng(newLat, newLng);

    // 更新标记位置并让地图跟随
    marker.setPosition(newPos);
    map.panTo(newPos);

    // 调用方法更新折线路径
    updatePolylinePath(newPos);
  }, 1000); // 每秒移动一次，可根据需求调整间隔
}

// 处理折线点的新增与截断逻辑
function updatePolylinePath(newPoint) {
  // 添加新点到数组末尾
  pathPoints.push(newPoint);
  
  // 如果点数超过20，移除最前面的旧点
  if (pathPoints.length > 20) {
    pathPoints.shift();
  }
  
  // 同步更新折线的显示路径
  polyline.setPath(pathPoints);
}

关键逻辑说明： #

• pathPoints数组：作为折线数据的唯一数据源，每次新增点后检查长度，超过20就用shift()删除最旧的起点，保证数组始终最多保留20个点。
• updatePolylinePath函数：封装了路径更新的核心逻辑，不管是标记移动、手动添加点还是其他触发场景，都可以调用这个方法来更新折线。
• Polyline.setPath()：Google Maps提供的原生方法，能快速让折线渲染最新的坐标数组，无需重新创建折线实例。

如果需要调整最大显示点数，只需要把代码里的20改成你想要的数字即可。

内容的提问来源于stack exchange，提问作者Jeffrey M Castro