谷歌地圖沒有顯示在屏幕上使用反應

我正在創建一個組件，呈現一個地圖，與谷歌地圖的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

來源

2017-08-16 Steven Daniel Anderson

我認爲你必須指定要顯示的地圖的寬度和高度 –

@AshKander說了些什麼。另外，請查看[this]（https://github.com/istarkov/google-map-react）或[this]（https://github.com/tomchentw/react-google-maps）以獲得流暢的Google React中的地圖集成。根據您的使用情況，我建議您選擇其中一個。 –

您需要在谷歌地圖上註冊才能獲取api密鑰。有關如何註冊的詳細步驟

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

檢查documentation：那你基本上提供鍵的同時加載谷歌地圖圖書館如下。

來源

2017-08-16 08:36:40

谷歌地圖沒有顯示在屏幕上使用反應

回答

相關問題