Question

我已经在gis堆栈交换论坛上问了这个问题，但没有运气。我在这里转发，希望我能找到答案！

我正在尝试创建一个远足径的交互式Leaflet地图。沿着这条路线，我有一些“航路点”，在GeoJSON文件中表示为标记：

 var waypoints = [{ 
    "Name": "Cabane de Susanfe", 
    "Altitude": 2095, 
    "Text": "This is the first waypoint",
    "coordinates": [ 6.91246, 46.14939 ] 
    }, { 
    "Name": "Rhône Valley", 
    "Altitude": 457, 
    "Text": "This is the second waypoint",
    "coordinates": [ 7.0458, 46.13417 ]
    }, { 
    "Name": "Cabane de Sorniot", 
    "Altitude": 2064, 
    "Text": "This is the third waypoint",
    "coordinates": [ 7.09167, 46.16176 ] 
    }, {
    "Name": "Cabane du Demècre", 
    "Altitude": 2361, 
    "Text": "This is the fourth waypoint",
    "coordinates": [ 7.07314, 46.18744 ] 
    },
    ]

我想在一个单独的div中创建一个按钮，它会循环显示这些航点，并在侧面显示有关每个航点的信息，就像地图幻灯片一样。到目前为止，我已经设法创建了一个按钮，循环通过“航点”中的元素。数组，但如何让地图平移到新标记并显示信息？这是我到目前为止迭代数组元素的jquery代码：

    $(document).ready(function(){
      var i = 0;

      $("#button-next").on('click', function(){
         i = (i + 1) % waypoints.length;

         console.log(waypoints[i]);
    });
    });

我正在寻找的效果类似于CartoDB的odyssey.js幻灯片或jQuery slidemapper插件，但我认为可能比使用其中一个库完全重建地图更简单。

我是一名小册子和javascript的初学者。

从geoJSON文件在Leaflet js中创建故事地图幻灯片

0 个答案: