最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - react-leaflet v3 zoom listener - Stack Overflow

programmeradmin3浏览0评论

I'm trying to subscribe on zoom change event, but can't get updates on each zoom change.

My goal is to reach markers scaling on zoom levels. Something like in this case React-Leaflet: Scale markers after zooming

But react-leaflet in v3 doesn't have onZoomChange event for MapContainer. So i can't get zoom updates for scaling my DivIcon

I'm trying to subscribe on zoom change event, but can't get updates on each zoom change.

My goal is to reach markers scaling on zoom levels. Something like in this case React-Leaflet: Scale markers after zooming

But react-leaflet in v3 doesn't have onZoomChange event for MapContainer. So i can't get zoom updates for scaling my DivIcon

Share Improve this question asked Dec 17, 2020 at 9:21 BaoTheMastrBaoTheMastr 1211 silver badge8 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 9

found the solution with useMapEvents hook provided in react-leaflet v3:
https://react-leaflet.js/docs/api-map#usemapevents

import {useMapEvents} from "react-leaflet";
import {useState} from "react";

function MyComponent() {
    const [zoomLevel, setZoomLevel] = useState(5); // initial zoom level provided for MapContainer
    
    const mapEvents = useMapEvents({
        zoomend: () => {
            setZoomLevel(mapEvents.getZoom());
        },
    });

    console.log(zoomLevel);

    return null
}

function MyMapComponent() {
    return (
        <MapContainer center={[50.5, 30.5]} zoom={5}>
            <MyComponent />
        </MapContainer>
    )
}
发布评论

评论列表(0)

  1. 暂无评论