如何设置传单地图的缩放以显示 React Leaflet 中的所有标记？

如何解决如何设置传单地图的缩放以显示 React Leaflet 中的所有标记？

我有一个 React Leaflet 地图，当给定一组标记时，它需要更改其中心和缩放比例。应更改缩放比例，以便所有标记都可见。

当前正在使用函数 ChangeView 尝试这种视图更改。

使用下面的代码，我可以移动地图视图，但无法让地图适合边界。运行代码给出错误：

错误：边界无效。

上线

map.fitBounds(markerBounds)

我们能做什么？谢谢！

import L,{ LatLng,latLngBounds,FeatureGroup } from 'leaflet';
import React from 'react';
import { MapContainer,TileLayer,Marker,Popup,useMap } from 'react-leaflet';
import MarkerClusterGroup from 'react-leaflet-markercluster';

import { LatLon,MapMarker } from '../../common/types';
import { config } from '../../config';

interface IProps {
    markers: MapMarker[];
    searchCenter: LatLon;
}

interface IChangeView {
    center: LatLon;
    markers: MapMarker[];
}

function ChangeView({ center,markers }: IChangeView) {
    const map = useMap();
    map.setView({lng: center.lon,lat: center.lat},DEFAULT_ZOOM);
    
    let markerBounds = latLngBounds([]);
    markers.forEach(marker => {
        markerBounds.extend([marker.lat,marker.lon])
    })
    map.fitBounds(markerBounds)   // <===== Error: Bounds are not valid.
    return null;
}


export function MapView({markers,searchCenter}: IProps): JSX.Element {
    
    return (
        <MapContainer
            center={[searchCenter.lat,searchCenter.lon]}
            zoom=14
            style={{ width:'100%',height:'100vh' }}
            className='markercluster-map'
        >
            <ChangeView center={searchCenter} markers={markers} />
            <TileLayer 
                url={`https://api.mapBox.com/styles/v1/mapBox/streets-v11/tiles/{z}/{x}/{y}?access_token=${config.api.mapBox}`}
            />
            <MarkerClusterGroup>
                {
                    markers.map((marker,index) => (
                        <Marker 
                            position={[marker.lat,marker.lon]} 
                            key={index}
                        />
                    ))
                }
            </MarkerClusterGroup>
        </MapContainer>
    )
}

---

也尝试使用 FeatureGroup 而不是 latLngBounds，但它给出了完全相同的错误

错误：边界无效

    let group = new FeatureGroup();
    markers.forEach(marker => {
        L.marker([marker.lat,marker.lon]).addTo(group);
    })
    map.fitBounds(group.getBounds());

解决方法

如果 markers 数组为空或 null，您创建的边界将没有 ._southWest 和 ._northEast 属性，并且会抛出该错误。只需使 fitBounds 语句以数组中有标记为条件：

if (markers.length && markers.length > 0){
  markers.forEach(marker => {
    markerBounds.extend([marker.lat,marker.lon])
  })
  map.fitBounds(markerBounds)
}

或者甚至只是一个快速的一个班轮：

markerBounds.isValid() && map.fitBounds(markerBounds)