默认情况下,我想在我的react项目的google maps组件中的标记上方打开一个信息窗口。
我试图通过为标记组件提供一个ref来实现此目的,该处理组件将调用标记onclick方法的处理程序,该方法会触发信息窗口切换。
但是,尽管我调用setState,但是我发现状态没有更新。我尝试在componentDidMount中执行此操作,还尝试直接在标记安装处理程序中设置状态。
如果手动单击标记,则状态成功突变。
我看到了this解决方案,但是就在React中使用它而言,这有点不雅,而我感到沮丧的是,我没有看到我的逻辑有任何问题。它应该可以工作,我想知道为什么不可以。
任何帮助将不胜感激-我的代码如下:
import { Component } from 'react';
import {Map, InfoWindow, Marker, GoogleApiWrapper} from 'google-maps-react';
const style = {
height:'400px',
width: '100%'
}
class MapView extends Component {
constructor() {
super();
this.state = {
showingInfoWindow: true,
activeMarker: {},
selectedPlace: {}
};
}
onMarkerClick = (props, marker, e) => {
this.setState(prevState => ({
selectedPlace: props,
activeMarker: marker,
showingInfoWindow: true
}));
}
onMarkerMounted = element => this.onMarkerClick(element.props, element.marker, element);
onClose = () => {
if (this.state.showingInfoWindow) {
this.setState({
showingInfoWindow: false,
activeMarker: null
});
}
};
render() {
return(
<Map
google={this.props.google}
style={style}
initialCenter={{
lat: {redacted},
lng: {redacted}
}}
zoom={15}
onClick={this.onMapClicked}
>
<Marker ref={this.onMarkerMounted} onClick={this.onMarkerClick}/>
<InfoWindow
marker={this.state.activeMarker}
visible={this.state.showingInfoWindow}
onClose={this.onClose}
>
<div>
Your Location Here!
</div>
</InfoWindow>
</Map>
);
}
}
export default GoogleApiWrapper({
apiKey: ('MY_API_KEY')
})(MapView);
答案 0 :(得分:0)
我相信您的榜样一切都很好。似乎没有显示信息窗口的原因是因为一旦触发onMarkerMounted
函数,地图还没有完全加载。
这是加载地图后显示信息窗口的更改列表:
a)引入mapLoaded
状态来跟踪地图是否已加载:
this.state = {
//...
mapLoaded: false
};
,并在加载地图后将其设置为true
:
handleMapIdle = () => {
this.setState({
mapLoaded: true
});
}
<Map
google={this.props.google}
style={style}
initialCenter={this.props.center}
zoom={this.props.zoom}
onIdle={this.handleMapIdle}
>
...
</Map>
,并在加载地图后最终初始化标记:
{this.state.mapLoaded && (
<Marker ref={this.onMarkerMounted} onClick={this.onMarkerClick} />
)}