谷歌地图没有显示在使用Act的屏幕中

Question

我正在创建一个渲染地图的组件，使用 Google 地图的 API，它没有给出错误，但它没有显示我不知道为什么的地图。

这是我的组件：

import React, {Component} from 'react'
export default class GoogleMap extends Component{
componentDidMount(){
new window.google.maps.Map(this.refs.map, {
center: {lat: -34.397, lng: 150.644},
zoom: 11
})
}
render(){
return <div ref="map"/> 
}
}

这是我称之为这个组件的地方：

renderRents(rentsData){        
return(
<tr key={rentsData.id}>
<td>
{rentsData.id}
</td>
<td>
<GoogleMap lon={rentsData.location.lon} lat={rentsData.location.lat}/>
</td>
<td>
{rentsData.status}
</td>
<td>
{rentsData.cost}
</td>
</tr>
)
}

另外，这是我在索引中的脚本.html：

<script src="https://maps.googleapis.com/maps/api/js"></script>

注意：我的项目是使用create-react-app引导

的

Answer 1

您需要在谷歌地图上注册才能获得 api 密钥。然后，您基本上在加载Google地图库时提供该密钥，如下所示：

src="https://maps.googleapis.com/maps/api/js?key=123123XXXXXX&sensor=false"

有关如何注册的详细步骤，请查看文档。