Mapbox Geocoder 的动态边界框

Question

我正在尝试根据当前可见的地图边界应用 Mapbox Geocoder (Mapbox GL JS) 搜索限制。当前代码在搜索尝试时输出错误 ("uncaught exception: Object")：

   map.on('zoom', function() {
    var bounds = map.getBounds();
    geocoder.options.bbox = [bounds.getNorthEast().lng, bounds.getNorthEast().lat, bounds.getSouthWest().lng, bounds.getSouthWest().lat];
   });

这可能吗？如果是 - 如何更正代码？

编辑：

已解决。事实证明，bbox 参数具有从最小值到最大值而不是 LonLatBounds 顺序（NE 到 SW）的棘手顺序（特别是对于同时显示负经度和正经度的英国）。如果有人感兴趣 - 正确工作的代码将是

// notice switch from 'zoom' to 'move'
map.on('move', function() {
    var bounds = map.getBounds();

    var minLon = bounds.getNorthEast().lng;
    var maxLon = bounds.getSouthWest().lng;
    if(minLon > maxLon) {
        maxLon = minLon;
        var minLon = bounds.getSouthWest().lng;
    }
    var minLat = bounds.getNorthEast().lat;
    var maxLat = bounds.getSouthWest().lat;
    if(minLat > maxLat) {
        maxLat = minLat;
        var minLat = bounds.getSouthWest().lat;
    }
    if(minLon >= -180 && maxLon <= 180) geocoder.options.bbox = [minLon, minLat, maxLon, maxLat];
});

编辑 2：不知何故 .flat() 来自 MS Edge 中选定的回复故障。小心。

Answer 1

查看API文档https://github.com/mapbox/mapbox-gl-geocoder/blob/master/API.md#setbbox正确的方法是调用

geocoder.setBbox([minX, minY, maxX, maxY]);

map.getBounds().toArray() returns [sw, ne] 所以你应该可以做到：

geocoder.setBbox(map.getBounds().toArray().flat());

geocoder.options 未在 API 中记录，因此无法保证它是否会工作或是否会在新版本中继续工作。

Mapbox Geocoder 的动态边界框

Dynamic bounding box for Mapbox Geocoder

mapbox

mapbox-gl

mapbox-gl-js