我正在映射对象数组并获取该地图的多个标记。 但是由于某些原因,我无法为他们显示Infowindow。
基本上,我希望默认情况下为地图上的每个标记显示Infowindow。我在这里做错了什么?
我的标记图工作正常。我有带有标记的地图,但是当我添加Infowindow时它不起作用。
我正在使用的图书馆是“ google-maps-react”
import React, { Component } from "react";
import { connect } from "react-redux";
import { getItems } from "../../ducks/itemReducer";
import {Map,InfoWindow, Marker, GoogleApiWrapper } from "google-maps-react";
const { REACT_APP_GOOGLE_KEY } = process.env;
class GeneralMap extends Component {
constructor(props) {
super(props);
this.state = {
category: "default"
};
}
componentDidMount() {
this.props.getItems();
console.log(this.props.getItems());
}
render() {
const style = {
width: "100%",
height: "100%"
};
const containerStyle = {
margin: "auto",
position: "relative",
width: "80%",
height: "30vh"
};
let markerMap = this.props.items.items.map((items, i) => {
console.log(items.item_lat);
return (
<div>
<Marker key={i}
name="Dolores park"
onClick={this.onMarkerClick}
position={{ lat: items.item_lat, lng:items.item_lng }}
/>
<InfoWindow
marker={{ lat: items.item_lat, lng:items.item_lng }}
visible={true}>
<div>
<h1>TEST</h1>
</div>
</InfoWindow>
</div>
)
});
{markerMap}
{console.log(markerMap)}
return (
<div>
<Map
containerStyle={this.props.containerStyle}
google={this.props.google}
style={this.props.style}
zoom={14}
initialCenter={{
lat: 40.854885,
lng: -88.081807
}}
>
{markerMap}
</Map>
</div>
)
}
}
const mapStateToProps = state => state;
export default connect(
mapStateToProps,
{ getItems }
)(GoogleApiWrapper({
apiKey: REACT_APP_GOOGLE_KEY
})(GeneralMap));