如何在地图的每个标记上方显示Infowindow。 (google-maps-react)

时间:2018-06-22 21:57:11

标签: javascript reactjs google-maps google-maps-react

我正在映射对象数组并获取该地图的多个标记。 但是由于某些原因,我无法为他们显示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));

0 个答案:

没有答案