Reactjs react地图传单圆圈营销员不';不渲染
我有一张传单地图,还有一个按钮。我想在单击按钮时显示一些圆圈标记,并在再次单击时删除圆圈标记(删除选项尚未实现) 我不希望每次单击按钮时都渲染所有贴图,我只希望渲染圆形标记器。 CircleMarker不会在地图上渲染,但我可以看到地图 这是我的代码: 组件映射Reactjs react地图传单圆圈营销员不';不渲染,reactjs,leaflet,marker,Reactjs,Leaflet,Marker,我有一张传单地图,还有一个按钮。我想在单击按钮时显示一些圆圈标记,并在再次单击时删除圆圈标记(删除选项尚未实现) 我不希望每次单击按钮时都渲染所有贴图,我只希望渲染圆形标记器。 CircleMarker不会在地图上渲染,但我可以看到地图 这是我的代码: 组件映射 function Map1() { const apartments = [ { roomType: 'shared room', geometry: [41.402610, 2.204270] },
function Map1() {
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') {
apartments.map(item => {
if (item.roomType === 'private room' || item.roomType === 'shared room') {
return (
<div>
<p>Carme</p>
<CircleMarker className="circle"
center={[41.409190, 2.209030]}
color={'#000080'}
width={.5}
fillColor={'blue'}
fillOpacity={0.5}
stroke={'black'}
>
</CircleMarker >
</div>
)
}
})
}
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" alt="habitacio" />
<img onClick={handleOnclik} name="green" src="images/green" alt="apartament" />
</div>
</div>
</div>
</>)
}
export default Map1
应用程序
从“React”导入React
从“react router dom”导入{withRouter}
从“/Navbar”导入导航栏
从“./Map”导入映射
函数App(){
返回(
);
}
使用路由器导出默认值(应用程序)
除非您使用未使用的反应传单,否则传单库中没有暴露的圆圈标记器
组件。因此,以下是添加到地图圆标记时需要使用的代码:
const handleOnclik = () => {
apartments.forEach(({ geometry }) => {
new L.CircleMarker(geometry, {
radius: 5,
fillColor: "blue",
width: 0.5,
stroke: "black",
color: "#000080",
fillOpacity: 0.5
}).addTo(map.current);
});
};
为了简单起见,我删除了if语句,只是为了举例说明
除非您使用未使用的react-mobile
,否则传单库中没有暴露的CircleMarker
组件。因此,以下是添加到地图圆标记时需要使用的代码:
const handleOnclik = () => {
apartments.forEach(({ geometry }) => {
new L.CircleMarker(geometry, {
radius: 5,
fillColor: "blue",
width: 0.5,
stroke: "black",
color: "#000080",
fillOpacity: 0.5
}).addTo(map.current);
});
};
为了简单起见,我删除了if语句,只是为了举例说明
您是否在浏览器控制台中看到任何错误?另外,您是否看到该组件是使用React-Dev工具浏览器插件加载/显示的?另外,你能把CircleMarker
组件的代码放进去吗?我在浏览器中没有任何错误,组件CircleMarker没有加载/出现。CircleMarker的代码在返回的内部:我是指CircleMarker
组件的源代码。在返回中,你只是调用它来渲染。但是我有一个函数handleOnclick,在里面我有,我不能在react中渲染和返回。。。只渲染。我想在课堂上我可以呈现和返回,但我需要一个函数CNAT。请检查我的答案,并让我知道它是否回答了您的问题。您是否在浏览器控制台中看到任何错误?另外,您是否看到该组件是使用React-Dev工具浏览器插件加载/显示的?另外,你能把CircleMarker
组件的代码放进去吗?我在浏览器中没有任何错误,组件CircleMarker没有加载/出现。CircleMarker的代码在返回的内部:我是指CircleMarker
组件的源代码。在返回中,你只是调用它来渲染。但是我有一个函数handleOnclick,在里面我有,我不能在react中渲染和返回。。。只渲染。我想在课堂上我可以呈现和返回,但我需要一个函数CNAT。请检查我的答案,并让我知道它是否回答了您的问题
const handleOnclik = () => {
apartments.forEach(({ geometry }) => {
new L.CircleMarker(geometry, {
radius: 5,
fillColor: "blue",
width: 0.5,
stroke: "black",
color: "#000080",
fillOpacity: 0.5
}).addTo(map.current);
});
};