React Leaflet 如何设置 Leaflet Map 的缩放以显示所有标记？

Question

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

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

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

Error: Bounds are not valid.

上线

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，但它给出了完全相同的错误

Error: Bounds are not valid

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

Answer 1

如果 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)

React Leaflet 如何设置 Leaflet Map 的缩放以显示所有标记？

How to Set Leaflet Map's Zoom to Show All Markers in React Leaflet?

javascript

leaflet

typescript

reactjs

react-leaflet