如何基于Google Map JavaScript API结合addListeners添加多条曲线（解决新曲线覆盖旧曲线问题）

你的问题很典型——现有代码用单个变量存储弧线标记，每次更新都会覆盖旧的，所以只能看到最新的那条。要保留原有弧线计算逻辑的同时支持多条曲线，关键是用数组管理所有弧线标记，而不是单个变量。下面是修改后的完整代码，我会一步步解释改动点：

核心改动点 #

• 把单个curveMarker变量改成curveMarkers数组，用来存储所有弧线的Marker实例
• 封装一个createCurveMarker函数，专门负责创建/更新单条弧线，传入两个标记点作为参数
• 地图事件监听时，遍历数组更新所有弧线

修改后的完整代码 #

JavaScript部分 #

var map;
var curvature = 0.5; // 控制弧线的弯曲程度
// 用数组存储所有弧线标记，替代原来的单个变量
var curveMarkers = [];

function init() {
  var Map = google.maps.Map,
      LatLng = google.maps.LatLng,
      LatLngBounds = google.maps.LatLngBounds,
      Marker = google.maps.Marker,
      Point = google.maps.Point;

  // 示例：创建两组点，生成两条弧线
  var pos1 = new LatLng(38.60971599083999, -105.42822913560047);
  var pos2 = new LatLng(31.549917555822212, -99.49938531446615);
  
  var pos3 = new LatLng(34.052235, -118.243683);
  var pos4 = new LatLng(40.712776, -74.005974);

  var bounds = new LatLngBounds();
  bounds.extend(pos1);
  bounds.extend(pos2);
  bounds.extend(pos3);
  bounds.extend(pos4);

  map = new Map(document.getElementById('map-canvas'), {
    center: bounds.getCenter(),
    zoom: 5
  });
  map.fitBounds(bounds);

  // 创建所有标记点
  var markerP1 = new Marker({
    position: pos1,
    // draggable: true,
    map: map
  });
  var markerP2 = new Marker({
    position: pos2,
    // draggable: true,
    map: map
  });
  
  var markerP3 = new Marker({
    position: pos3,
    // draggable: true,
    map: map
  });
  var markerP4 = new Marker({
    position: pos4,
    // draggable: true,
    map: map
  });

  // 封装弧线创建/更新函数，传入两个标记点
  function createCurveMarker(markerA, markerB) {
    var pos1 = markerA.getPosition(),
        pos2 = markerB.getPosition(),
        projection = map.getProjection();
    
    if (!projection) return; // 确保投影已初始化

    var p1 = projection.fromLatLngToPoint(pos1),
        p2 = projection.fromLatLngToPoint(pos2);

    // 原有弧线计算逻辑完全保留
    var e = new Point(p2.x - p1.x, p2.y - p1.y),
        m = new Point(e.x / 2, e.y / 2),
        o = new Point(e.y, -e.x),
        c = new Point(
          m.x + curvature * o.x,
          m.y + curvature * o.y
        );

    var pathDef = 'M 0,0 ' +
                  'q ' + c.x + ',' + c.y + ' ' + e.x + ',' + e.y;

    var zoom = map.getZoom(),
        scale = 1 / (Math.pow(2, -zoom));

    var symbol = {
      path: pathDef,
      scale: scale,
      strokeWeight: 1,
      fillColor: 'none',
      strokeColor: '#ff0000' // 可以给不同弧线设置不同颜色区分
    };

    // 查找当前弧线是否已存在（如果需要支持更新单个弧线）
    var existingMarker = curveMarkers.find(marker => marker.markerPair[0] === markerA && marker.markerPair[1] === markerB);
    
    if (existingMarker) {
      existingMarker.setOptions({
        position: pos1,
        icon: symbol,
      });
    } else {
      var curveMarker = new Marker({
        position: pos1,
        clickable: false,
        icon: symbol,
        zIndex: 0,
        map: map
      });
      // 存储对应的标记点对，方便后续更新
      curveMarker.markerPair = [markerA, markerB];
      curveMarkers.push(curveMarker);
    }
  }

  // 更新所有弧线的函数
  function updateAllCurves() {
    curveMarkers.forEach(curve => {
      createCurveMarker(curve.markerPair[0], curve.markerPair[1]);
    });
  }

  // 初始化生成两条弧线
  createCurveMarker(markerP1, markerP2);
  createCurveMarker(markerP3, markerP4);

  // 地图事件触发时更新所有弧线
  google.maps.event.addListener(map, 'projection_changed', updateAllCurves);
  google.maps.event.addListener(map, 'zoom_changed', updateAllCurves);

  // 如果需要支持拖动标记点更新对应弧线，添加以下监听
  // google.maps.event.addListener(markerP1, 'dragend', () => createCurveMarker(markerP1, markerP2));
  // google.maps.event.addListener(markerP2, 'dragend', () => createCurveMarker(markerP1, markerP2));
}
google.maps.event.addDomListener(window, 'load', init);

CSS部分（不变） #

html, body, #map-canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

HTML部分（不变，记得替换YOUR_API_KEY） #

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places&key=YOUR_API_KEY"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>

关键细节说明 #

1. 数组管理弧线：用curveMarkers数组存储所有弧线Marker，每条弧线都有自己的实例，不会被覆盖
2. 封装复用逻辑：createCurveMarker函数保留了你原来的弧线计算代码，只是改成接收两个标记点参数，这样每次添加新曲线时只需调用这个函数，传入对应的两个标记点即可
3. 批量更新：地图投影或缩放变化时，遍历数组更新所有弧线，确保所有曲线都能正确适配地图状态
4. 可扩展性：如果需要动态添加更多曲线，只需创建新的标记点对，调用createCurveMarker即可；还可以给不同弧线设置不同的strokeColor来区分

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