如何实现点击创建Polyline并显示鼠标到下一点的预览线？

嘿，好问题！Google Maps JavaScript API本身并没有提供「一键启用预览线」的内置选项，但咱们完全可以通过几行额外的代码实现和原生「你的地点」里一模一样的预览效果，思路很清晰：用一条临时的半透明Polyline来实时渲染上次点击点到当前鼠标位置的连线，下面是具体的实现方案：

核心思路 #

• 维护两个Polyline实例：一个是你正在绘制的正式线条，另一个是用来做预览的临时线条
• 第一次点击地图时，初始化正式线条，并开启地图的mousemove监听
• 鼠标移动时，实时更新临时预览线的终点为当前鼠标坐标
• 后续点击地图时，把当前点击坐标添加到正式线条的路径中，并更新预览线的起点为这个新坐标
• 可选：添加结束绘制的触发逻辑（比如双击地图）

修改后的完整代码示例 #

结合你已有的代码，我们补充预览线的逻辑：

// 全局/闭包内维护状态变量
let activeLine = null;
let previewLine = null;
let lastClickPoint = null;

// 初始化地图点击监听，启动绘制流程
google.maps.event.addListener(boundaryMap, 'click', function(e) {
  if (!activeLine) {
    // 第一次点击：创建正式线条并初始化预览线
    startNewLine(e.latLng);
    lastClickPoint = e.latLng;
    
    // 创建预览线（可以自定义样式，比如半透明红色）
    previewLine = new google.maps.Polyline({
      strokeColor: '#FF6666',
      strokeOpacity: 0.6,
      strokeWeight: 2,
      map: boundaryMap
    });

    // 监听鼠标移动，实时更新预览线
    google.maps.event.addListener(boundaryMap, 'mousemove', function(mouseEvent) {
      if (activeLine && previewLine) {
        // 预览线的路径是[上次点击点, 当前鼠标点]
        previewLine.setPath([lastClickPoint, mouseEvent.latLng]);
      }
    });
  } else {
    // 后续点击：把当前点添加到正式线条中
    activeLine.getPath().push(e.latLng);
    lastClickPoint = e.latLng;
  }
});

// 你的原有函数，修改为保存activeLine实例
function startNewLine(latLng) {
  activeLine = new google.maps.Polyline({
    draggable: true,
    editable: true,
    strokeColor: '#0066CC',
    strokeOpacity: 1.0,
    strokeWeight: 3
  });
  activeLine.setMap(boundaryMap);
  activeLine.getPath().push(latLng);
}

// 可选：双击地图结束绘制，清除预览线
google.maps.event.addListener(boundaryMap, 'dblclick', function() {
  if (previewLine) {
    previewLine.setMap(null);
    previewLine = null;
  }
  activeLine = null;
  lastClickPoint = null;
});

关键细节说明 #

• 预览线样式：你可以根据需求调整previewLine的strokeColor、strokeOpacity等属性，和原生Google Maps的预览线风格对齐
• 状态管理：用activeLine判断是否正在绘制状态，避免重复创建线条
• 事件监听：mousemove事件只会在绘制状态开启时生效，不会一直占用资源
• 扩展性：如果需要支持绘制多边形，只需要把预览线改成多边形的临时路径即可

这样实现后，效果就和Google Maps原生的「添加线条或形状」功能完全一致了——点击地图创建起点，移动鼠标时显示实时预览线，再次点击添加新的线段节点，双击结束绘制。

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