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

Welcome to 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++; 
}); 

このヘルプが必要です。