javascript - 反应和谷歌地图反应。不显示信息窗口
问题描述
我正在为一个项目使用 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 作为 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>
希望这对您有所帮助。
推荐阅读
- python - Spark SQL 无法输出数据帧
- sql - 仅获取没有 NULL order_line 的 sale_order
- c# - 一项一项地运行任务,并在其中进行检查
- azure - Azure Functions 一次可以完成多少代码?
- flutter - JSON 的 Flutter 使用类
- python - 使用气流获取存储在存储桶中的文件大小 (GCP)
- node.js - node.js 未安装 android studio gradle
- javascript - 如何使用 D3.js 实现过渡持续时间?
- c - C 中 3D 直接卷积实现的优化
- javascript - ReactJS:如何从父组件中清除图像预览