[英]How to change the options of React MarkerClusterGroup when MarkerClusterGroup is a parent element?
Im am using leaflet cluster library (v1.1.8) and i am trying to pass options.我正在使用传单集群库(v1.1.8)并且我正在尝试传递选项。
I want the app to stop showing coverage on hover (see picture below).我希望应用程序在悬停时停止显示覆盖范围(见下图)。
But whenever i add the options showCoverageOnHover={false}
it does not work.但是每当我添加选项
showCoverageOnHover={false}
它都不起作用。
<MarkerClusterGroup showCoverageOnHover={false}>
<MarkersLayer
stationsToDisplay={stationsToDisplay}
stationsList={stationsList}
refreshStationsList={this.refreshStationsList}
StandsToDisplay={StandsToDisplay}
CARToDisplay={CARToDisplay}
selectedOption={selectedOption}
/>
</MarkerClusterGroup >
The documentation shows that the correct code to pass options would be : 文档显示传递选项的正确代码是:
<MarkerClusterGroup showCoverageOnHover={false} />
However, i am passing already as a prop :但是,我已经作为道具传递了:
<MarkerClusterGroup >
<MarkersLayer
stationsToDisplay={stationsToDisplay}
stationsList={stationsList}
refreshStationsList={this.refreshStationsList}
StandsToDisplay={StandsToDisplay}
CARToDisplay={CARToDisplay}
selectedOption={selectedOption}
/>
</MarkerClusterGroup >
Then how do i pass the option ?那么我如何通过选项? I have tried inside the , as below but this does not work
我已经尝试过,如下所示,但这不起作用
<MarkersLayer
stationsToDisplay={stationsToDisplay}
stationsList={stationsList}
refreshStationsList={this.refreshStationsList}
StandsToDisplay={StandsToDisplay}
CARToDisplay={CARToDisplay}
selectedOption={selectedOption}
showCoverageOnHover={false}
/>
I am quite a noob in react, so any observation and suggestion would be much appreciated !我在反应方面是个菜鸟,所以任何观察和建议都将不胜感激! thanks a lot
多谢
According to the new API version on 1.1.8, something like this will work:根据 1.1.8 上的新 API 版本,这样的事情会起作用:
<MarkerClusterGroup showCoverageOnHover={false} >
<MarkersLayer
stationsToDisplay={stationsToDisplay}
stationsList={stationsList}
refreshStationsList={this.refreshStationsList}
StandsToDisplay={StandsToDisplay}
CARToDisplay={CARToDisplay}
selectedOption={selectedOption}
/>
</MarkerClusterGroup >
Another example of using markerClusterGroup
might be useful:另一个使用
markerClusterGroup
例子可能很有用:
import MarkerClusterGroup from 'react-leaflet-markercluster';
<MarkerClusterGroup>
<Marker position={[49.8397, 24.0297]} />
<Marker position={[52.2297, 21.0122]} />
<Marker position={[51.5074, -0.0901]} />
</MarkerClusterGroup>;
By adding the parameters that way in the class itself, fixes the issue :通过在类本身中以这种方式添加参数,解决了这个问题:
class MarkerClusterGroup extends MapLayer {
createLeafletElement(props) {
const el = new L.markerClusterGroup(
{
props,
showCoverageOnHover:false,
disableClusteringAtZoom: 13,
}
);
this.contextValue = {
...props.leaflet,
layerContainer: el
};
return el;
}
}
export default withLeaflet(MarkerClusterGroup);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.