Mapbox fitbounds() - 无效的 LngLat 对象：(NaN, NaN)

Question

最近几个小时我一直在用头撞桌子。

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

但是，这是我在下面的代码中遇到的错误。

这个错误出现在下面的控制台日志图像之后，所以 lat lng 坐标肯定在那里。

Uncaught Error: Invalid LngLat object: (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);
      },
    });

  };

Answer 1

对于fitBounds() function you will need to pass your bounds as a LngLatBounds object, an array of LngLatLike objects in [South West, North East] order, or an array of numbers in [west, south, east, north] order. Mapbox has an example of this on their website here.

如果您想捕获所有标记，您可以计算坐标的最西、最南、最东和最北的值，然后将它们作为数组传递。在你的情况下：[-0.54664079, 51.38542169, -0.3735228, 51.45368209].

    mapboxgl.accessToken = 'pk.eyJ1IjoicGxtYXBib3giLCJhIjoiY2s3MHkzZ3VnMDFlbDNmbzNiajN5dm9lOCJ9.nbbtDF54HIXo0mCiekVxng';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-74.5, 40],
zoom: 9
});
 
document.getElementById('fit').addEventListener('click', function() {
map.fitBounds([-0.54664079, 51.38542169, -0.3735228, 51.45368209]);
});

    body { margin: 0; padding: 0; }
    #map { position: absolute; top: 0; bottom: 0; width: 100%; }
#fit {
  display: block;
  position: relative;
  margin: 0px auto;
  width: 50%;
  height: 40px;
  padding: 10px;
  border: none;
  border-radius: 3px;
  font-size: 12px;
  text-align: center;
  color: #fff;
  background: #ee8a65;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Fit a map to a bounding box</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.css" rel="stylesheet" />

</head>
<body>

<div id="map"></div>
<br />
<button id="fit">Fit to Box</button>

 
</body>
</html>

Answer 2

如果你有超过一对坐标，你应该先用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);
  }
});

我已经准备了这个 fiddle 解决方案 how to fit bounds to a list of coords 有 3 个坐标的数组，但你可以很容易地应用到你的。

这是结果

然后点击缩放到边界

Answer 3

我不知道这与您的问题有关，但是当我在移动浏览器中的地图工作中遇到此错误时，我使用以下代码解决了问题：

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.userAgent)) { 
$('#mapContainer').css({ 'width': (($(window).width())) + 'px' }); 
}

#mapContainer 宽度默认为 100%。

Answer 4

就我而言，当填充值较高时，我遇到了同样的错误。

//this did not work
map.fitBounds(fitBounds, {padding: 150});
    
//this worked
map.fitBounds(fitBounds);

Mapbox fitbounds() - 无效的 LngLat 对象：(NaN, NaN)

Mapbox fitbounds() - Invalid LngLat object: (NaN, NaN)

mapbox

mapbox-gl

mapbox-gl-js