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

希望这有帮助！

循环遍历Mapbox中的坐标

1 个答案: