在Mapbox中通過座標循環

Question

我對編碼非常陌生，所以我的代碼可能是錯誤的。我正在使用Mapbox中的flyTo功能從城市飛往城市。我想通過點擊按鈕飛往多個城市。我已經創建了一個我想要飛到的座標的數組，但代碼似乎沒有工作。有人可以幫我解決我出錯的地方嗎？謝謝！以下是如何使用該功能的頁面：https://www.mapbox.com/mapbox-gl-js/example/flyto/。

var arrayofcoords = [[-73.554,45.5088], [-73.9808,40.7648], [-117.1628,32.7174], [7.2661,43.7031], [11.374478, 43.846144], [12.631267, 41.85256], [12.3309, 45.4389], [21.9885, 50.0054]]; 

document.getElementById('fly').addEventListener('click', function() { 

if(i = 0; i < arrayofcoords.length; i++) { 
map.flyTo(arrayofcoords[i]); 
    }); 
}); 

Answer 1

歡迎來到Stackoverflow！

下面是你如何從一個座標飛到每個按鈕點擊下一個座標。請注意，當您到達最後一個座標時，下一個按鈕點擊會將您帶回第一個座標。

mapboxgl.accessToken = '<your access token here>'; 

var map = new mapboxgl.Map({ 
    container: 'map', 
    style: 'mapbox://styles/mapbox/streets-v9', 
    center: [-74.50, 40], 
    zoom: 9 
}); 

// This variable will track your current coordinate array's index. 
var idx = 0; 

var arrayOfCoordinates = [ 
    [-73.554,45.5088], 
    [-73.9808,40.7648], 
    [-117.1628,32.7174], 
    [7.2661,43.7031], 
    [11.374478, 43.846144], 
    [12.631267, 41.85256], 
    [12.3309, 45.4389], 
    [21.9885, 50.0054] 
]; 

document.getElementById('fly').addEventListener('click', function() { 
    // Back to the first coordinate. 
    if (idx >= arrayOfCoordinates.length) { 
     idx = 0; 
    } 

    map.flyTo({ 
     center: arrayOfCoordinates[idx] 
    }); 

    idx++; 
}); 

希望得到這個幫助！