我有一个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)
答案 0 :(得分:0)
如果我了解您想要同时将所有具有.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)