Question

我正在为项目使用React和google-maps-react库。我正在尝试为每个标记显示InfoWindows。但这是行不通的。我已经查看了文档以及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);

地图显示所有标记，但不显示InfoWindow。我可能做错了。如何获取要显示的标记的InfoWindow？

这里是picture

谢谢。

Answer 1

好像对InfoWindow的支持，因为Marker的支持子是pull request，它已合并到版本2.0.3中，该版本尚未发布。截至该日期（2019年9月1日）的最新NPM版本为2.0.2。

您可以做的是，当单击标记时，通过将信息窗口放置在标记的同一级别上来打开一个信息窗口，然后将其连接到每个标记，具体取决于所单击的标记。

看看以下基于演示的codesandbox。下面的示例代码。

      <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>

希望这对您有所帮助。

Answer 2

这是 InfoWindow 显示的完整解决方案。我还附加了您可以看到的链接，以进一步了解。.https://codesandbox.io/s/quizzical-hermann-5ehs7

[profile.dev.package."*"]
opt-level = 3

enter image description here

反应和谷歌地图反应。不显示信息窗口

2 个答案: