0
我想在标记上单击显示InfoWindow。我跟着一些教程,并使用react-google-maps作为我的项目。我希望我的应用能够像这样工作:“https://tomchentw.github.io/react-google-maps/basics/pop-up-window”,但我的代码有点不同。React + Redux - 在标记上显示InfoWindow单击
class Map extends React.Component {
handleMarkerClick(){
console.log("Clicked");
}
handleMarkerClose(){
console.log("CLOSE");
}
render(){
const mapContainer= <div style={{height:'100%',width:'100%'}}></div>
//fetch markers
const markers = this.props.markers.map((marker,i) => {
return (
<Marker key={i} position={marker.location} showTime={false} time={marker.time} onClick={this.handleMarkerClick} >
{
<InfoWindow onCloseClick={this.handleMarkerClose}>
<div>{marker.time}</div>
</InfoWindow>
}
</Marker>
)
})
/* set center equals to last marker's position */
var centerPos;
if(markers[markers.length-1]!== undefined)
{
centerPos=markers[markers.length-1].props.position;
}
else {
centerPos={};
}
return (
<GoogleMapLoader
containerElement={mapContainer}
googleMapElement={
<GoogleMap
defaultZoom={17}
center={centerPos}
>
{markers}
</GoogleMap>
}/>
);
}
}
export default Map;
我从另一个从URL获取数据的类组件获得“this.props.markers”。我几乎可以肯定,这是很容易解决的问题。目前在控制台上的标记点击我得到了“点击”,标记关闭“关闭”,你可以从上面的代码猜测这是因为handleMarkerClick()和handleMarkerClose()。我想用InfoWindow弹出窗口。 我该怎么做才能使它工作?
这里是Heroku的链接:App on heroku
我在这个问题上有点迷失,你可以精心制作一个模型或在https://jsfiddle.net/ – cabolanoz
上的示例你能重新表达吗?信息窗口不显示? – dagatsoin
我想弹出InfoWindow,就像这里一样,但目前我不知道如何通过反应来实现它。我会将我目前的代码上传到heroku;) – Mateusz