将标记和折线从 Google 表格中的目的地添加到传单地图答案

【问题标题】：Add markers and polylines to a Leaflet map from destinations in a Google Sheet将标记和折线从 Google 表格中的目的地添加到传单地图
【发布时间】：2021-08-13 14:43:23
【问题描述】：

我正在尝试创建一个 Leaflet 地图，它会自动在 Google 表格中的目的地之间添加标记和折线。

我已经设法从链接到我的 Google 表格的其他示例中设置了一个地图。您可以在此处查看示例：

<!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>
      #map-div {
        position: absolute;
        height: 100%;
        width: 100%;
      }

    </style>
  </head>

  <body>
    <div id="map-div"></div>
  </body>

</html>

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: 5,
  maxZoom: 100
});
basemap.addTo(map);

function addPoints(data, tabletop) {
  for (var row in data) {
    var marker = L.marker([
      data[row].Latitude,
      data[row].Longitude
    ]).addTo(map);
    marker.bindPopup('<strong>' + data[row].Info + '</strong>');
  }
}

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

https://jsfiddle.net/Enounce/kwvn5e6z/12/

但不幸的是，我没有能力让地图按我的意愿行事：

在标记Draw lines between markers in leaflet之间画线
缩放以适应所有标记Zoom to Fit All Markers on LeafletJS Map
如果可能，添加所有目的地的概览，就像 Google 地图中的路线面板一样。不过我还没有找到这方面的例子。

我不确定如果目的地位于外部来源中，这是否可能。任何帮助表示赞赏！

【问题讨论】：

标签： google-sheets leaflet

【解决方案1】：

在标记之间画线：

您需要创建一个L.Polyline 并向其中添加纬度：

function addPoints(data, tabletop) {
    var line = L.polyline([]).addTo(map);
    for (var row in data) {
    var marker = L.marker([
      data[row].Latitude,
      data[row].Longitude
    ]).addTo(map);
    line.addLatLng(marker.getLatLng());
    marker.bindPopup('<strong>' + data[row].Info + '</strong>');
  }
}

缩放以适应所有标记：

将标记添加到L.FeatureGroup()，然后您可以使用map.fitBounds(fg.getBounds()); 将地图边界拟合到组边界

var fg = L.featureGroup().addTo(map);

function addPoints(data, tabletop) {
    var line = L.polyline([]).addTo(map);
    for (var row in data) {
    var marker = L.marker([
      data[row].Latitude,
      data[row].Longitude
    ]).addTo(fg);
    line.addLatLng(marker.getLatLng());
    marker.bindPopup('<strong>' + data[row].Info + '</strong>');
  }
  
  map.fitBounds(fg.getBounds());
}

但是您需要从 TileLayer 中删除 minZoom: 5。

目的地

将目的地存储在一个数组中，然后在循环中创建一个 html 元素并添加一个点击监听器：

var destinationHTML = document.getElementById("destinations-body");

var fg = L.featureGroup().addTo(map);
var destinations = [];
function addPoints(data, tabletop) {
    var line = L.polyline([]).addTo(map);
    for (var row in data) {
    var marker = L.marker([
      data[row].Latitude,
      data[row].Longitude
    ]).addTo(fg);
    line.addLatLng(marker.getLatLng());
    marker.bindPopup('<strong>' + data[row].Info + '</strong>');
    destinations.push({
        marker,
      data: data[row],
      id: row
    });
    
    
  destinationHTML.innerHTML += "<div class='destination-elm' onclick='destinationClick(\""+row+"\")'><span>"+data[row].Info+"</span></div>"
  }
  
  map.fitBounds(fg.getBounds());
}

function destinationClick(id){
    console.log(id)
  destinations.forEach(function(obj){
    if(obj.id == id){
        map.panTo(obj.marker.getLatLng());
    }
  })
}

示例：https://jsfiddle.net/falkedesign/k3b4nups/

【讨论】：

谢谢，Falke-Design。这就是我所能要求的一切！如果我想要一个没有目的地概览的版本，代码会怎样？我尝试删除 HTML 中的部分内容，但这完全删除了大多数标记。
查看：jsfiddle.net/falkedesign/Lh2p61jy 请不要忘记接受正确的答案