reactjs - GoogleMapReact 不显示地图或标记
问题描述
我正在尝试在我的 ReactJS 应用程序中设置谷歌地图。我通过 npm https://www.npmjs.com/package/google-map-react了解了 GoogleMapReact 。我已经添加了所有设置,但是运行时会显示以下内容:
标记正确显示名称,但地图本身不会加载。控制台中没有警告或错误。我使用了错误类型的密钥吗?
我的代码如下:
class Breweries extends React.Component {
constructor(props) {
super(props);
this.state = {
error: null,
isLoaded: false,
items: []
};
}
componentDidMount(){
fetch("https://api.openbrewerydb.org/breweries?by_city=pittsburgh&by_state=pennsylvania")
.then(res => res.json())
.then(
(result) => {
this.setState({
isLoaded: true,
items: result
});
},
(error) => {
this.setState({
isLoaded: true,
error
});
});
}
render() {
const { error, isLoaded, items } = this.state;
if (error) {
return <div>Error: {error.message}</div>;
} else if (!isLoaded) {
return <div>Loading...</div>;
} else {
return (
<ListGroup>
{items.map(item => (
<ListGroup.Item key={item.name}>
<ul>
<li>{item.name}</li>
<li>{item.brewery_type}</li>
<li>{item.street}, {item.city}, {item.state}</li>
<li><a href={item.website_url}>{item.website_url}</a></li>
<MiniMap latitude={item.latitude} longitude={item.longitude} name={item.name} />
</ul>
</ListGroup.Item>
))}
</ListGroup>
);
}
}
}
const MiniMap = ({ latitude, longitude, name }) => (
<div style={{height: '500px', width: '500px', position: 'relative'}}>
<GoogleMapReact bootstrapURLKeys={{ key: "*/ my google js api key is here */" }}
center={{ latitude, longitude }}
centerAroundCurrentLocation={true}
zoom={11}
resetBoundsOnResize={true}>
<AnyReactComponent
lat={latitude}
lng={longitude}
text={name}
/>
</GoogleMapReact>
</div>
);
编辑:添加 API 密钥的屏幕截图
解决方案
推荐阅读
- phpstorm - LiveEdit 在外部更新时看不到 CSS 文件的更改
- shell - 修改 grep 结果以打印匹配字符串中的特定单词
- python - Jupyter Notebook:文件“.ipynb_checkpoints”不存在 - Python
- forms - Delphi 2007 带两个显示器的系统的模态表单位置
- attributes - 平面表中缺少自定义属性
- php - PHP上传/下载文件的大小限制
- javascript - 参数数量不足或找不到条目
- php - 如何在视图codeigniter中自动显示自动生成ID
- javascript - 在 Angular 6 运行时动态导入 JS 库
- c - 自旋锁初始化函数