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

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

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

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

引导的

Answer 1

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

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

检查documentation以了解有关如何注册的详细步骤。

使用React不会在屏幕上显示Google地图

1 个答案: