如何基于Google Sheet数据为Leaflet地图添加标记、折线及相关扩展功能

下面是整合了你需要的所有功能的完整代码，直接替换你原有代码即可运行：

<!DOCTYPE html>
<html>
<head>
  <script src='//cdn.jsdelivr.net/npm/tabletop@1.5.2/src/tabletop.min.js'></script>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" />
  <script src="//unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    /* 侧边路线面板样式 */
    #route-panel {
      position: absolute;
      left: 0;
      top: 0;
      width: 300px;
      height: 100%;
      background: #fff;
      padding: 15px;
      overflow-y: auto;
      z-index: 1000;
      box-shadow: 2px 0 10px rgba(0,0,0,0.1);
    }
    #route-panel h3 {
      margin-bottom: 15px;
      padding-bottom: 10px;
      border-bottom: 1px solid #eee;
    }
    .route-item {
      padding: 10px;
      margin-bottom: 8px;
      background: #f5f5f5;
      border-radius: 4px;
      cursor: pointer;
      transition: background 0.2s;
    }
    .route-item:hover {
      background: #e9e9e9;
    }
    /* 地图容器样式，预留左侧面板宽度 */
    #map-div {
      position: absolute;
      left: 300px;
      top: 0;
      height: 100%;
      width: calc(100% - 300px);
    }
  </style>
</head>
<body>
  <div id="route-panel">
    <h3>目的地列表</h3>
    <div id="route-list"></div>
  </div>
  <div id="map-div"></div>
  <script>
    var map = L.map('map-div').setView([60.1682653, 24.9422078], 5);
    var basemap = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: 'Basemap (c) <a href="http://openstreetmap.org">OpenStreetMap</a>',
      minZoom: 2,
      maxZoom: 18
    });
    basemap.addTo(map);

    function addPoints(data, tabletop) {
      // 存储所有坐标点，用于绘制折线和适配视野
      var pointList = [];
      // 存储所有标记实例，用于列表点击联动
      var markerList = [];
      // 获取路线列表容器
      var routeListDom = document.getElementById('route-list');
      // 清空之前的列表内容
      routeListDom.innerHTML = '';

      for (var i = 0; i < data.length; i++) {
        var row = data[i];
        var latLng = [Number(row.Latitude), Number(row.Longitude)];
        // 添加标记
        var marker = L.marker(latLng).addTo(map);
        marker.bindPopup('<strong>' + row.Info + '</strong>');
        // 把坐标加入点集合
        pointList.push(latLng);
        // 把标记加入标记集合
        markerList.push(marker);

        // 往路线面板添加列表项
        var itemDom = document.createElement('div');
        itemDom.className = 'route-item';
        itemDom.innerText = (i+1) + '. ' + row.Info;
        // 列表项点击事件：定位到对应标记，打开弹窗
        itemDom.addEventListener('click', (function(idx) {
          return function() {
            map.panTo(pointList[idx]);
            markerList[idx].openPopup();
          }
        })(i));
        routeListDom.appendChild(itemDom);
      }

      // 绘制标记间的折线
      if (pointList.length >= 2) {
        L.polyline(pointList, {
          color: '#2196F3',
          weight: 3,
          opacity: 0.7
        }).addTo(map);
      }

      // 自动缩放适配所有标记
      if (pointList.length > 0) {
        var bounds = L.latLngBounds(pointList);
        map.fitBounds(bounds, {padding: [20, 20]});
      }
    }

    function init() {
      Tabletop.init({
        key: 'https://docs.google.com/spreadsheets/d/1Rs6xPlJ8pU4UFfmokjATaf4dArMWxQxZcyS-xRIIFuY/edit?usp=sharing',
        callback: addPoints,
        simpleSheet: true
      })
    }
    init()
  </script>
</body>
</html>

• 标记间折线绘制：按照Google Sheet里的行顺序依次连接所有坐标点，修改Sheet内的行排序即可调整路线顺序，折线的颜色、粗细、透明度可在L.polyline的配置参数里自定义。
• 自动缩放适配：加载完所有数据后会自动计算所有标记的边界范围，调整地图视野让所有标记完整展示，fitBounds的padding参数可控制标记和地图边缘的留白距离。
• 目的地概览列表：左侧固定展示所有目的地的列表，点击任意列表项会自动把地图定位到对应标记位置并打开信息弹窗，列表样式可通过修改CSS自定义调整。

所有功能都支持Google Sheet作为外部数据源动态更新，修改Sheet内容后刷新页面即可同步更新地图数据。

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