GoogleMaps React:默认打开 InfoWindow - 不是来自 onClick
GoogleMaps React: Open InfoWindow by Default - not from onClick
我想在我的 React 项目中 google 地图组件中的标记上方默认打开一个信息 window。
我试图通过标记组件的引用来实现这一点,该组件的处理程序调用触发信息 window 切换的标记 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);
我相信你的例子一切都很好。信息 window 未显示的原因似乎是因为触发 onMarkerMounted
功能后地图尚未完全加载。
这是加载地图后显示信息 window 的更改列表:
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} />
)}
我想在我的 React 项目中 google 地图组件中的标记上方默认打开一个信息 window。
我试图通过标记组件的引用来实现这一点,该组件的处理程序调用触发信息 window 切换的标记 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);
我相信你的例子一切都很好。信息 window 未显示的原因似乎是因为触发 onMarkerMounted
功能后地图尚未完全加载。
这是加载地图后显示信息 window 的更改列表:
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} />
)}