reactjs 点击React瓣叶上的标记时,如何创建和删除标记周围的圆圈

k2fxgqgv  于 2022-11-29  发布在  React
关注(0)|答案(2)|浏览(146)

我认为这个问题是使用Popup或eventHandler。但是当我使用Popup时,圆被创建但没有被删除。而且我不知道如何使用eventHandlers来创建圆。这是关于这个问题的第一个代码。

<MapContainer
                center={[48.864716, 2.349]}
                zoom={2}
                scrollWheelZoom={true}
                zoomControl={false}
                style={{ width: "100%", height: "100%" }}
                minZoom={2}
                maxZoom={5}
                doubleClickZoom={false}>
                <TileLayer
                    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                />
                <Polygon positions={overline} />
                <Marker position={[36.5, 130]} >
                    <Popup >Korea
                        <Circle center={[36.5, 130]} radius={1000000} />
                    </Popup>
                </Marker>
            </MapContainer>

Here is how it looks
包含eventHandler的代码。

<MapContainer
                center={[48.864716, 2.349]}
                zoom={2}
                scrollWheelZoom={true}
                zoomControl={false}
                style={{ width: "100%", height: "100%" }}
                minZoom={2}
                maxZoom={5}
                doubleClickZoom={false}>
                <TileLayer
                    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                />
                <Polygon positions={overline} />
                <Marker position={[36.5, 130]} eventHandlers ={{click : (e) => drawCircle(e.latlng)}}>
                    <Popup >Korea</Popup>
                </Marker>
            </MapContainer>

How it looks with event handler
请帮帮我
我同时使用了EventHandler和popup。但是我不知道如何修复它。

stszievb

stszievb1#

import React from 'react';
import { MapContainer, TileLayer, Marker, Popup, Circle } from 'react-leaflet';
import "./test.css"

function Test_full_map() {

    const drawCircle = (position) => {
        console.log(position)
        return (<Circle center={position} radius={10000} />)
    }

    return (
        <div id='map'>
            <MapContainer
                center={[48.864716, 2.349]}
                zoom={2}
                scrollWheelZoom={true}
                zoomControl={false}
                style={{ width: "100%", height: "100%" }}
                minZoom={2}
                maxZoom={5}
                doubleClickZoom={false}>
                <TileLayer
                    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                />
                <Marker position={[36.5, 130]}
                //eventHandlers ={{click : (e) => drawCircle(e.latlng)}} //use eventHandler
                >
                    <Popup closeButton={true}>Korea
                        <Circle center={[36.5, 130]} radius={1000000} //use Popup
                        /> 
                    </Popup>
                </Marker>
            </MapContainer>
        </div>
    );
}

export default Test_full_map;

此代码为完整代码。感谢您的关注。

dced5bon

dced5bon2#

这个可以

// set initial value for circle
     const [showCircle, setShowCircle] = useState(false);

     const onMarkerClick = (r) => {
       // e.preventDefault();
       console.log('marker click')
       // toggle circle
       setShowCircle(s => !s) 
     }

        <MapContainer
            center={[48.864716, 2.349]}
            zoom={2}
            scrollWheelZoom={true}
            zoomControl={false}
            style={{ width: "100%", height: "100%" }}
            minZoom={2}
            maxZoom={5}
            doubleClickZoom={false}>
            <TileLayer
                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />
            <Polygon positions={overline} />
            <Marker 
               position={[36.5, 130]} 
               // add event handler here
               eventHandlers={{ click: onMarkerClick }}
             >
                <Popup >Korea
                    // show circle conditionally when marker is clicked
                   { showCircle && <Circle center={[36.5, 130]} radius={1000000} />}
                </Popup>
            </Marker>
        </MapContainer>

一些指针名称drawCircle需要更改为DrawComponent需要to start with capital letter,并且出于性能原因需要位于主组件之外
希望这对你解决问题有帮助

相关问题