Mapbox fitbones()-无效的LngLat对象：(NaN，NaN) [英] Mapbox fitbounds() - Invalid LngLat object: (NaN, NaN)

问题描述

在过去的几个小时里，我一直在用头撞桌子。

我正在尝试让MapBox在加载时放大到所有标记的边界区域。

但是，这是我为下面的代码收到的错误。

此错误发生在下面的控制台日志图像之后，因此最新的LNG坐标肯定在那里。

未捕获错误：无效的LngLat对象：(NaN，NaN)

  const onLoad = () => {

    let points = [];

    props.cats.forEach(cat => (
      points.push([ cat.lat, cat.lng ])
    ));

    points.length > 0 && ref.current.getMap().fitBounds(points, {
      padding: { top: 50, bottom: 50, left: 50, right: 50 },
      easing(t) {
          return t * (2 - t);
      },
    });

  };

推荐答案

如果您有多对坐标，您应该首先使用coordinates.reduce缩减数组，然后通过new mapboxgl.LngLatBounds定义界限。之后，您可以使用map.fitBounds对界限进行飞翔操作，像在代码中一样定义您喜欢的填充和缓动函数。

var coordinates = points;

var bounds = coordinates.reduce(function(bounds, coord) {
  return bounds.extend(coord);
}, new mapboxgl.LngLatBounds(coordinates[0], coordinates[0]));

map.fitBounds(bounds, {
  padding: { top: 50, bottom: 50, left: 50, right: 50 },
  easing(t) {
      return t * (2 - t);
  }
});

我已经准备了此小提琴解决方案how to fit bounds to a list of coords，其中包含3个坐标，但您可以轻松地将其应用于您的解决方案。

这就是结果

然后点击缩放至边界

这篇关于Mapbox fitbones()-无效的LngLat对象：(NaN，NaN)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！