如何解决特定的状态不会更新 - React
我使用的是 Google Cloud 平台提供的 Google Maps Javascript API。 地图组件有一个名为 styles 的属性。这个属性告诉地图应该渲染什么,比如餐馆、公园等等。
问题是当我调用 setState 方法并更新我想在地图中显示的内容时,与我状态中的其他元素不同,没有任何反应。
看一下代码的一个和平部分来理解我指的是什么: 当我不想在地图上显示默认poi特征时,这是我的方法
this.setState({
showPoiFeatures: false,mapTypestyle: [
{
featureType: "poi",stylers: [{ visibility: "off" }]
},]
})
}
这就是我上面所说的属性
<Map
className="map"
initialCenter={{ lat: -23.0916907,lng: -47.2216777 }}
zoom={14}
google={this.props.google}
onClick={this.onClickMap}
controlSize="1"
clickableIcons={false}
styles={this.state.mapTypestyle}
>
这是我的初始状态:
state = {
variable1: {},variable2: {
object: {
variable3: '',variable4: 0,variable5: 0,variable6: 0,variable7: '',variable8: 0,variable9: '',variable10: 0,variable11: 0
}
},variable12: true,mapTypestyle: [],showPoiFeatures: true,}
空数组表示我想显示地图上的所有要素
如果这篇文章被混淆了,请让我解释更多。谢谢
解决方法
style
的 <Map/>
参数采用 CSS 样式对象 - 通常是宽度和高度。如果您想要 custom map style,则需要使用 setOptions>styles
。
这是一个 sample code(注意:使用 API 密钥使代码正常工作y)以及下面关于如何实现这一点的代码片段:
import React,{ Component } from "react";
import { Map,Marker,GoogleApiWrapper } from "google-maps-react";
const mapStyle = [
{
featureType: "poi",stylers: [{ visibility: "off" }]
}
];
export class MapContainer extends Component {
constructor(props) {
super(props);
this.state = {
mapVariable: true
};
}
_mapLoaded(mapProps,map) {
this.setState({
mapVariable: map
});
}
showStyle = () => {
this.state.mapVariable.setOptions({
styles: mapStyle
});
};
hideStyle = () => {
this.state.mapVariable.setOptions({
styles: null
});
};
render() {
const coords = { lat: 40.712775,lng: -74.005973 };
const containerStyle = {
position: "relative",width: "600px",height: "600px"
};
return (
<div>
<form>
<input
type="radio"
id="show"
name="choice"
value="show"
onClick={this.showStyle}
/>
<label for="show">Show</label>
<input
type="radio"
id="hide"
name="choice"
value="hide"
onClick={this.hideStyle}
/>
<label for="hide">Hide</label>
<br />
</form>
<Map
containerStyle={containerStyle}
google={this.props.google}
zoom={16}
initialCenter={coords}
onReady={(mapProps,map) => this._mapLoaded(mapProps,map)}
>
<Marker position={coords} />
</Map>
</div>
);
}
}
export default GoogleApiWrapper({
apiKey: "YOUR_KEY"
})(MapContainer);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。