Javascript 谷歌地图也会做出反应。不显示信息窗口

我正在为一个项目使用React和google maps React库。我正在尝试为每个标记显示信息窗口。但它不起作用。我已经查看了文档以及GitHub的相关问题，但没有找到解决方案

这是密码

import React from "react";
import { connect } from "react-redux";

import { Map, GoogleApiWrapper, Marker, InfoWindow } from "google-maps-react";

import { API_GOOGLE_MAPS } from "../config";

const mapStyles = {
    width: "100%",
    height: "100%"
};

export class GoogleMap extends React.Component {
    render() {
        let markers = this.props.vendors
            ? this.props.vendors.map((vendor, index) => {
                  return (
                      <Marker
                          key={index}
                          id={index}
                          position={{
                              lat: vendor.Latitude,
                              lng: vendor.Longitude
                          }}
                          onClick={() => console.log("You clicked me!")}
                      >
                          <InfoWindow
                              position={{
                                  lat: vendor.Latitude,
                                  lng: vendor.Longitude
                              }}
                              visible={true}
                          >
                              <div id={vendor.Latitude}>hello</div>
                          </InfoWindow>
                      </Marker>
                  );
              })
            : null;

        return (
            <Map google={this.props.google} zoom={13} style={mapStyles} initialCenter={this.props.mapCenter}>
                {markers ? markers : null}
            </Map>
        );
    }
}

const mapStateToProps = state => ({
    vendors: state.app.vendors,
    mapCenter: state.app.mapCenter
});

const WrappedContainer = GoogleApiWrapper({
    apiKey: API_GOOGLE_MAPS
})(GoogleMap);

export default connect(mapStateToProps)(WrappedContainer);

从“React”导入React；
从“react redux”导入{connect}；
从“google maps react”导入{Map，GoogleApiWrapper，Marker，InfoWindow}；
从“./config”导入{API_谷歌地图}；
常量映射样式={
宽度：“100%”，
身高：“100%”
};
导出类GoogleMap扩展了React.Component{
render（）{
让markers=this.props.vendors
？此.props.vendors.map（（供应商，索引）=>{
返回(
log（“你点击了我！”）
>
你好
);
})
：null；
返回(
{markers？markers:null}
);
}
}
常量mapStateToProps=状态=>({
供应商：state.app.vendors，
地图中心：state.app.mapCenter
});
const WrappedContainer=GoogleApiWrapper({
apiKey:API_谷歌地图
})（谷歌地图）；
导出默认连接（MapStateTops）（WrappedContainer）；

地图显示所有标记，但不显示信息窗口。我可能做错了。如何获取标记显示的信息窗口

这是一个

---

谢谢。

看起来像是对InfoWindow的支持，因为Marker的道具子代是一个已经合并到2.0.3版中的产品，该版本尚未上线。截至该日期（2019年9月1日）的最新NPM版本为2.0.2

您可以做的是在单击标记时打开一个信息窗口，方法是将信息窗口放置在标记的同一级别，然后根据单击的标记将其连接到每个标记

请看以下基于演示的内容。下面是示例代码

      <Map
        google={this.props.google}
        onClick={this.onMapClicked}
        zoom={13}
      >
        <Marker
          name="Marker 1"
          onClick={this.onMarkerClick}
          position={{ lat: 37.778519, lng: -122.40564 }}
        />

        <InfoWindow
          marker={this.state.activeMarker}
          visible={this.state.showingInfoWindow}
        >
          <div>
            <h4>Hello</h4>
          </div>
        </InfoWindow>
      </Map>

你好

---

希望这对您有所帮助。

这是一个完整的解决方案信息窗口显示。我还附上了您可以看到的链接，以获得更多了解

import React，{Component}来自“React”；
从“GoogleMaps react”导入{Map，InfoWindow，Marker，GoogleApiWrapper}；
导出类MapContainer扩展组件{
状态={
活动标记：{}，
所选地点：{}，
ShowingInfo窗口：false
};
onMarkerClick=（道具、标记）=>
这是我的国家({
活动标记器：标记器，
选择地点：道具，
showingInfoWindow：真
});
OnInfo窗口关闭=（）=>
这是我的国家({
activeMarker:null，
ShowingInfo窗口：false
});
onMapClicked=（）=>{
if（此.state.showiningInfo窗口）
这是我的国家({
activeMarker:null，
ShowingInfo窗口：false
});
};
render（）{
如果（！this.props.loaded）返回加载。。。；
返回(
{this.state.selectedPlace.name}
);
}
}
导出默认GoogleApprapper({
apiKey:“，
版本：“3.38”
})（地图容器）；

---

谢谢。但我注意到，由于您在单击

时正在更新状态，因此将导致整个

的重新渲染。让它看起来像马车。有什么解决办法吗？呵呵，你能澄清一下你所说的童车外观是什么意思吗？这是库的代码，也是它在演示中的实现方式，所以在任何情况下，我都假设没有针对预期行为的“解决方案”，或者您指的是其他东西？是的，澄清一下。如果您仔细观看演示，当您单击一个标记时，所有标记都会很快重新渲染。这很可能是因为组件的状态正在更改为显示/取消显示信息窗口。感谢您的澄清，我现在明白您的意思，我很乐意帮助您找到解决方案，尽管这将是一个完全不同的问题

import React, { Component } from "react";
import { Map, InfoWindow, Marker, GoogleApiWrapper } from "google-maps-react";

export class MapContainer extends Component {
  state = {
    activeMarker: {},
    selectedPlace: {},
    showingInfoWindow: false
  };

  onMarkerClick = (props, marker) =>
    this.setState({
      activeMarker: marker,
      selectedPlace: props,
      showingInfoWindow: true
    });

  onInfoWindowClose = () =>
    this.setState({
      activeMarker: null,
      showingInfoWindow: false
    });

  onMapClicked = () => {
    if (this.state.showingInfoWindow)
      this.setState({
        activeMarker: null,
        showingInfoWindow: false
      });
  };

  render() {
    if (!this.props.loaded) return <div>Loading...</div>;

    return (
      <Map
        className="map"
        google={this.props.google}
        onClick={this.onMapClicked}
        style={{ height: "100%", position: "relative", width: "100%" }}
        zoom={13}
      >
        <Marker
          name="Marker 1"
          onClick={this.onMarkerClick}
          position={{ lat: 37.778519, lng: -122.40564 }}
        />

        <Marker
          name="Marker 2"
          onClick={this.onMarkerClick}
          position={{ lat: 37.759703, lng: -122.428093 }}
        />

        <Marker name="Marker 3" onClick={this.onMarkerClick} />

        <InfoWindow
          marker={this.state.activeMarker}
          onClose={this.onInfoWindowClose}
          visible={this.state.showingInfoWindow}
        >
          <div>
            <h4>{this.state.selectedPlace.name}</h4>
          </div>
        </InfoWindow>
      </Map>
    );
  }
}
export default GoogleApiWrapper({
  apiKey: "",
  version: "3.38"
})(MapContainer);