reactjs - Google-maps-react 未加载地图
问题描述
当我尝试使用 Google 地图加载组件时(道具已按预期传递给组件),我只是收到一条消息"Loading map..."
,但未加载带有标记的地图。控制台中也没有错误。这是组件。我在这里做错了什么?
import React, {Component} from 'react';
import {Map, InfoWindow, Marker, GoogleApiWrapper} from 'google-maps-react';
import { Constants } from './../../utils/constants';
export class MapContainer extends Component {
state = {
selectedPlace: ''
}
onMarkerClick = (e) => {
this.setState({selectedPlace: e.Name});
}
render() {
return (
<Map
google={this.props.google}
style={{width: '20vw', height: '45vh', 'top': '1.5rem'}}
containerStyle={{width: '20vw', height: '30vh'}}
initialCenter={{
lat: this.props.lat,
lng: this.props.lng
}}
zoom={15}>
{this.props.markers.length > 0 && // Rendering multiple markers for
this.props.markers.map((m) => {
return (<Marker
onClick={this.onMarkerClick}
name={this.state.selectedPlace}
position={{ lat: m.Latitude, lng: m.Longitude }}
key={m.Name} />);
})
}
{this.props.markers && // Rendering single marker for supplier details map
<Marker onClick={this.onMarkerClick}
name={this.state.selectedPlace} />
}
<InfoWindow onClose={this.onInfoWindowClose}>
<h4>{this.state.selectedPlace}</h4>
</InfoWindow>
</Map>
);
}
}
export default GoogleApiWrapper({
apiKey: (Constants.GoogleMapsApiKey),
language: "RU"
})(MapContainer)
解决方案
在您的代码和框演示中,您正在导出您的应用程序组件,您需要在其中呈现它。
export default GoogleApiWrapper({
apiKey: "",
language: "RU"
})(App);
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
在这里,您正在渲染未由GoogleApiWrapper
HOC 包装的应用程序组件。与其导出包装的应用程序,不如将其呈现如下:
App = GoogleApiWrapper({
apiKey: "",
language: "RU"
})(App);
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
推荐阅读
- flutter - 在flutterwith pushNamed中在屏幕之间传递图像
- owl-carousel-2 - 猫头鹰轮播自动播放超时不起作用
- javascript - 由于内存泄漏,我无法在 heroku 中部署我的应用程序。connect.session()
- c# - 试图将 xmlNodeList 转换为 DateTime
- c# - 将 IdentityUser 添加到 HttpContext.User
- typescript - 如何在打字稿中接收每个记录成员的类型?
- java - 在 Scala 中使用 Java 类的有界通配符编译错误
- python - 如何更改每个函数中的全局变量,而不会使 Python 中的函数相互影响?
- sql-server - SQL 按行分组列
- java - 为什么堆栈跟踪包含对 parseInt() 方法的重复调用?