Question

我有一个React传单地图，还有一个按钮。在make filter（）和forEach（）之后，单击按钮时，我在地图上添加了一些circleMarkers。当我再次单击（作为切换）时，我想删除或隐藏circleMarkers。我有两个CSS className：可见和隐藏但我想将一次单击将circleMarkers从可见更改为全部隐藏。现在，我必须单击几次以删除所有circleMarkers，因为clikc仅删除了一个circleMarker

组件图

import React, { useEffect, useRef } from "react";
import L from "leaflet";
import './map.css'

function Map() {

    const apartments = [
        { roomType: 'shared room', geometry: [41.402610, 2.204270] },
        { roomType: 'shared room', geometry: [41.411300, 2.217630] },
        { roomType: 'private room', geometry: [41.410220, 2.212520] },
        { roomType: 'apartament sencer', geometry: [41.410630, 2.216970] },
        { roomType: 'private room', geometry: [41.409190, 2.209030] },
    ]

    let map = useRef(null);

    useEffect(() => {
        let url = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}'
        const access = 'pk.eyJ1Ijoiam9zZXQyMSIsImEiOiJjazF1bGZlcHowYjVlM2RwYW9ia2pwaWtlIn0.9n-6tKArfdSfd15Do6YxLA'
        map.current = L.map("map");
        const defaultCenter = [41.383, 2.173];
        const defaultZoom = 13.10;

        let layer = L.tileLayer(url, {
            maxZoom: 18,
            id: 'mapbox.streets',
            accessToken: access,
        });

        map.current.setView(defaultCenter, defaultZoom);
        layer.addTo(map.current);
       }, [map])

    const handleOnclik = (e) => {
        e.preventDefault()
        let color = (e.target.name)

        if (color === 'pink') {
            let pink = document.querySelector('.visible')
            if (!pink) {

                let circle
                var result = apartments.filter(item => {
                    if (item.roomType === 'private room' || item.roomType === 'shared room') { return item.geometry }
                })

                result.forEach(({ geometry }) => {
                    circle = new L.CircleMarker(geometry, {
                        radius: 5,
                        fillColor: "pink",
                        width: 0.5,
                        stroke: "black",
                        color: '#FF1493',
                        fillOpacity: 0.5,
                        id: 'pink',
                        className: 'visible'
                    }).addTo(map.current);
                });
            } else {
                pink.classList.remove('visible')
                pink.classList.add('hidden')
            }
        }
    }

    return (<>
        <div className="container">
            <div>
                <div id="map" className="normalscreen"></div>
            </div>
            <div id="basemaps-wrapper" className="leaflet-bar">
                <select id="basemaps">
                    <option>Visualització</option>
                    <option value="mapbox.streets">Streets</option>
                    <option value="mapbox.satellite">Satellite</option>
                    <option value="mapbox.outdoors">Outdoors</option>
                    <option value="mapbox.dark">Dark</option>
                    <option value="mapbox.light">Light</option>
                    <option value="mapbox.DarkGray">Dark Gray</option>
                </select>
                <button onClick={onChangeFullScreen}>Full Screen</button>
                <div>
                    <img onClick={handleOnclik} name="pink" src="images/pink.svg" alt="habitacio" />
                    <img onClick={handleOnclik} name="green" src="images/green.svg" alt="apartament" />
                </div>
            </div>
        </div>
    </>)
}
export default Map

CSS

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  flex-direction: column;
  width: 100vw;
  justify-content: center;
}

#map {
  display: block;
}

.normalscreen {
  width: 50%;
  height: 50vh;
  left: 49%;
  position: relative;
}

.fullscreen {
  width: 100%;
  height: 80vh;
  left: 0%;
  text-align: center;
}

.visible {
  visibility: visible;
}

.hidden {
  visibility: hidden;
}

APP

import React from 'react'
import { withRouter } from 'react-router-dom'
import Navbar from './Navbar'
import Map from './Map'

function App() {

  return (<>
    <Navbar />
    <Map />
  </>);
}
export default withRouter(App)

Answer 1

如果我了解您想要同时将所有具有.visible class属性的图像更改为隐藏图像？如果是这样，请将行let pink = document.querySelector('.visible')更改为let pink = document.querySelectorAll('.visible')，以获取具有此类名称的所有元素。

然后在else语句中，您可以遍历结果：

for (var i = 0; i < pink.length; i++) {
   pink[i].classList.remove('visible')
    pink[i].classList.add('hidden')
}

if语句if (!pink)可能还需要更改为if(pink.length === 0)

React Map传单添加/删除circleMarker onClick

1 个答案: