请立即开始。 当用户从其他组件上单击按钮时,我试图在地图上弹出窗口信息。 即时通讯使用google-map-react librery。 因此,我成功获取了要映射组件的位置信息,但我不知道如何继续。 这是我的代码:
class MyMap extends Component {
state = {
showingInfoWindow: false,
activeMarker: {},
selectedPlace: {},
};
onMarkerClick = (props, marker, e) => {
debugger;
this.setState({
selectedPlace: props,
activeMarker: marker,
showingInfoWindow: true
})};
onMapClicked = (props) => {
if (this.state.showingInfoWindow) {
this.setState({
showingInfoWindow: false,
activeMarker: null
})
}
};
clickedFromList = (location)=>{
}
componentDidMount() {
this.props.onRef(this)
}
componentWillUnmount() {
this.props.onRef(undefined)
}
render() {
let locations;
debugger;
if(this.props.locations){
locations= this.props.locations.map(location =>{
return <Marker key={location.id} title={location.title}
onClick={this.onMarkerClick}
position={location.location}
description={location.description}
/>
})
}
return (
<div id='map' >
<Map style={{width: '70%'}} google={this.props.google}
zoom={14} initialCenter={{lat: 31.7774208,
lng: 35.23711
}}>
{locations}
<InfoWindow
marker={this.state.activeMarker}
visible={this.state.showingInfoWindow}>
<div>
<h1>{this.state.selectedPlace.title}</h1>
<p>{this.state.selectedPlace.description}</p>
</div>
</InfoWindow>
</Map>
</div>
);
}
}
因此位置信息在clickedFromList函数中。 我试图调用onMarkerClick函数,但是我没有标记。 所以有人知道如何从Google-rmap-react中的标记打开信息窗口吗?