Question

我正在尝试创建一个 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 地图中的路线面板一样。不过，我一直没能找到这方面的例子。

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

Answer 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/

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

1 个答案:

在标记之间画线：

缩放以适合所有标记：

目的地