我已经在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的初学者。