React Leaflet在Flutter内嵌网页中无法适配指定边界的问题

React Leaflet地图在原生网页环境下可正常自动适配指定边界，但在Flutter应用内嵌此React网页时，点击应用内按钮跳转至该页面后，地图虽加载了所有目标点位信息，却无法自动居中到预设的边界范围内，且此问题仅在Flutter环境下出现。由于Flutter应用由他人开发，无法对其进行修改。

地图组件代码 #

const [routeSuggested, setRouteSuggested] = useState([])
const [routeRealized, setRouteRealized] = useState([])
const [vehicleTruck, setVehicleTruck] = useState(null);
const [vehicleAggregate, setVehicleAggregate] = useState(null);
const [position, setPosition] = useState([-23.673571, -46.576755])
const [zoom, setZoom] = useState(14)
const [bounds, setBounds] = useState([])
const [isLoaded, setIsLoaded] = useState(false)

const getCoordsRoute = () => {
    var coordsVehicle = [vehicleMonitored?.lastLat, vehicleMonitored?.lastLng]

    var coordsNotCompleted = tasks
        .filter((task) => task.completed === false)
        .map((task) => [task.lat, task.lng])

    return [coordsVehicle, ...coordsNotCompleted]
}

useEffect(() => {
    const requestData = async () => {
        let routeDone = []
        let routeSuggest = []
        let listCoord = getCoordsRoute()

        if (scheduleDetail?.scheduleStatusId !== 8 && listCoord.length > 1) {
            var responseRoutes = await getRequestPathRouteOSRM(listCoord)
            var routeOSRM = responseRoutes?.data.routes[0]

            if (routeOSRM) {
                routeSuggest = routeOSRM.geometry.coordinates.map(item => [
                    item[1], item[0]
                ])
                setRouteSuggested(routeSuggest)
            }

            setVehicleTruck(scheduleDetail.vehicle)
            setVehicleAggregate(scheduleDetail.vehicleAggregate)
        }
        else {
            setRouteSuggested([])
            setVehicleTruck(null)
            setVehicleAggregate(null)
        }

        if (scheduleDetail) {
            let schedId = scheduleDetail.scheduleId
            var responseTrips = await getLocationVehicleTrips(token, schedId)
        }

        if (responseTrips) {
            routeDone = responseTrips.map(item => [item.lat, item.long])
            setRouteRealized(routeDone)
        }

        let boundsCenter = [...routeDone, ...routeSuggest]
        if (boundsCenter.length === 0) {
            boundsCenter = tasks.map(item => [item.lat, item.lng])
        }

        setBounds(boundsCenter)
        setIsLoaded(true)
    }
    requestData()

}, [scheduleDetail])

const handleMarkerIcon = (index) => {
    return (
        new L.divIcon({
            html: ReactDOMServer.renderToString(
                <div
                    style={{
                        width: "30px",
                        height: "30px",
                        border: "1px solid #FFF",
                        borderRadius: "50%",
                        background: tasks[index].statusTask.color,
                        color: "#FFF",
                        position: "absolute",
                        left: "-13px",
                        bottom: "-16px"
                    }}
                >
                    <strong style={{
                        display: "flex",
                        justifyContent: "center",
                        alignItems: "center",
                        height: "100%"
                    }}>{handleItemLetter(index)}</strong>
                </div>
            ),
            iconAnchor: [12, 0],
        })
    )
}

const zoomActual = (getZoom) => {
    setTimeout(() => {
        setZoom(getZoom)
    }, 1000);
}

return (
    <>
        <MapContainer center={position} style={{ height: "40vh" }} zoom={13} >
            <TileLayer
                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />
            <Polyline color="#0000FF" weight={6} opacity="0.8" positions={routeRealized} />
            <Polyline color="#753eb3" weight={6} opacity="0.8" positions={routeSuggested} />
            {isLoaded ? <LocationMarker bounds={bounds} zoom={zoomActual} /> : null}

            {tasks.length > 0 && tasks.map((point, index) => {
                return (
                    <Marker key={index} position={[point.lat, point.lng]} icon={handleMarkerIcon(index)} />
                )
            })}
            <VehicleAggregatePosition vehicleAggregate={vehicleAggregate} />
            <VehicleTruckPosition vehicleTruck={vehicleTruck} />
        </MapContainer>
    </>
)

LocationMarker子组件代码 #

useEffect(() => {
    const getLocation = async () => {
        map.locate()
    }

    getLocation()
}, [bounds])

const map = useMapEvents({
    locationfound() {
        map.fitBounds(bounds)
    },
    zoom() {
        zoom(map.getZoom())
    }
})

内容的提问来源于stack exchange，提问作者Davi Soares