[英]Google-maps-react marker not showing InfoWindow onClick
When I click the google maps marker, it registers the click but I cant appear to get the InfoWindow to appear after the state change.当我单击谷歌地图标记时,它会注册单击,但在 state 更改后,我似乎无法让 InfoWindow 出现。
Tried setting/reading from an updated state on click单击时尝试从更新的 state 设置/读取
'''react '''反应
import React from 'react';
import {Map, InfoWindow, Marker, GoogleApiWrapper} from 'google-maps-react';
export class BathroomMap extends React.Component{
constructor(props){
super(props);
this.state = {
gmapsAPI: "https://maps.googleapis.com/maps/api/js?key="+ this.API_KEY +"&callback=initMap",
center: {
lat: 40.7367,
lng: -73.9899
},
zoom: 15,
showingInfoWindow: false,
activeMarker: {},
selectedPlace: {},
infoWindowOpen: false,
}
this.handleToggleOpen = this.handleToggleOpen.bind(this);
}
handleToggleOpen = () => {
console.log("Marker Clicked");
this.setState({
infoWindowOpen: !this.state.infoWindowOpen,
});
}
render() {
return (
<Map google={window.google} zoom={14} initialCenter={this.state.center}>
<Marker onClick={this.handleToggleOpen}
name={'Current location'} />
<InfoWindow open={this.state.infoWindowOpen} onClose={this.onInfoWindowClose}>
<div>
<h1>Marker Info Placeholder</h1>
</div>
</InfoWindow>
</Map>
);
}
}
BathroomMap = GoogleApiWrapper({
apiKey: (/*Omitted*/)
})(BathroomMap)
''' '''
I expected google map marker with some sort of InfowWindow to appear but instead the infowWindowOpened returns undefined我预计会出现带有某种 InfowWindow 的 google map 标记,但 infowWindowOpened 返回 undefined
The google-maps-react documentation on InfoWindow says the following: InfoWindow 上的google-maps-react文档说明如下:
The visibility of the
<InfoWindow />
component is controlled by a visible prop.<InfoWindow />
组件的可见性由可见属性控制。 The visible prop is a boolean(PropTypes.bool)
that shows the<InfoWindow />
when true and hides it when false.可见的道具是 boolean
(PropTypes.bool)
,当为真时显示<InfoWindow />
,当为假时隐藏它。There are two ways how to control a position of the
<InfoWindow />
component.有两种方法可以控制
<InfoWindow />
组件的 position。 You can use aposition
prop or connect the<InfoWindow />
component directly to an existing<Marker />
component by using amarker
prop.您可以使用
position
道具或使用marker
道具将<InfoWindow />
组件直接连接到现有<Marker />
组件。
In your code implementation, you're missing a visible
prop, and either a position
prop or a marker
prop.在您的代码实现中,您缺少
visible
道具,以及position
道具或marker
道具。 This is why your info window is not showing up.这就是为什么您的信息 window 没有显示的原因。
My answer and linked codesandbox in related thread React and google-maps-react.我的答案和相关线程React 和 google-maps-react中的链接代码框。 Not displaying InfoWindow will hopefully help you.
不显示 InfoWindow希望对您有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.