我有一个为Google地图创建2000个标记的组件,并且我将安装一个脚本以根据条件使它们可见/隐藏。在此期间,我只是测试并发现我无法获得显示:无论是作为内联样式还是通过变量输入,都无法在组件上工作。这是当前代码(该组件正在父组件的return函数中访问)。样式显示在return语句中:
const CoordinatesFunction = (props) => {
let RunCoordinates = _.times(2000, function() {
let longitude = (Math.random() * (170 - -170) + -170).toFixed(7) * 1;
let latitude = (Math.random() * (80 - -80) + -80).toFixed(7) * 1;
let url = "";
let nwRef = React.createRef();
if (latitude >=0 && latitude <= 90 && longitude >= -180 && longitude <= 0) {
url="https://maps.google.com/mapfiles/ms/icons/blue.png";
{props.store.dispatch(IncreaseNorthwest());}
} else if ( latitude <=0 && latitude >= -90 && longitude >= -180 && longitude <= 0 ) {
url="https://maps.google.com/mapfiles/ms/icons/yellow.png";
{props.store.dispatch(IncreaseSouthwest());}
} else if ( latitude >=0 && latitude <= 90 && longitude >= 0 && longitude <= 180 ) {
url="https://maps.google.com/mapfiles/ms/icons/green.png";
{props.store.dispatch(IncreaseNortheast());}
} else if ( latitude <=0 && latitude >= -90 && longitude >= 0 && longitude <= 180 ) {
url="https://maps.google.com/mapfiles/ms/icons/red.png";
{props.store.dispatch(IncreaseSoutheast());}
}
return <div key={Math.random()} ref={nwRef} style={{ display: 'none' }}>
<Marker
position={{lat: latitude, lng: longitude}}
icon={{ url: url,
scaledSize: new google.maps.Size(25, 25), size: new google.maps.Size(22, 22) }}
>
</Marker>
</div>
})
return(<div>{RunCoordinates}</div>)
}