Leaflet地图开发：如何为polyline添加鼠标悬停显示的弹窗

核心逻辑是给每个polyline绑定鼠标事件，触发对应弹窗的显示/隐藏，可同步增加高亮样式提升交互体验。

基础实现代码 #

创建polyline时直接绑定弹窗和事件即可：

// 初始化地图（已完成该步骤可跳过）
const map = L.map('map').setView([39.9042, 116.4074], 10);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

// 1. 创建polyline
const routeLine = L.polyline([
  [39.9042, 116.4074],
  [31.2304, 121.4737]
], {
  color: '#2196F3',
  weight: 3
}).addTo(map);

// 2. 绑定自定义弹窗内容，每个polyline可设置独立内容
routeLine.bindPopup('线路名称：北京到上海\n里程：1318公里', {
  // 可选配置：关闭自动平移避免地图跳动，调整弹窗偏移避免遮挡鼠标
  autoPan: false,
  offset: L.point(0, -10)
});

// 3. 监听鼠标悬停事件
routeLine.on('mouseover', function() {
  // 高亮当前线路
  this.setStyle({
    color: '#f44336',
    weight: 5
  });
  // 打开弹窗
  this.openPopup();
});

// 4. 监听鼠标移出事件
routeLine.on('mouseout', function() {
  // 恢复线路原始样式
  this.setStyle({
    color: '#2196F3',
    weight: 3
  });
  // 关闭弹窗
  this.closePopup();
});

批量生成多polyline的处理方式 #

如果有多个线路需要批量处理，直接把逻辑写到循环中即可：

// 你的线路数据示例
const routeList = [
  {
    path: [[39.9042, 116.4074], [31.2304, 121.4737]],
    popupContent: '线路1：北京-上海'
  },
  {
    path: [[23.1291, 113.2644], [22.5431, 114.0579]],
    popupContent: '线路2：广州-深圳'
  }
];

// 循环生成每个polyline并绑定事件
routeList.forEach(route => {
  const line = L.polyline(route.path, {color: '#2196F3', weight: 3}).addTo(map);
  line.bindPopup(route.popupContent, {autoPan: false, offset: L.point(0, -10)});
  
  line.on('mouseover', function() {
    this.setStyle({color: '#f44336', weight: 5});
    this.openPopup();
  });
  line.on('mouseout', function() {
    this.setStyle({color: '#2196F3', weight: 3});
    this.closePopup();
  });
});

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