结合使用Google Maps和React-如果无法加载地图(例如API失败),如何创建错误消息

时间:2018-11-06 11:24:01

标签: javascript reactjs google-maps onerror

嗨,谢谢您的帮助

我正在使用react构建一个应用程序,并使用了react-google-maps。 为了通过本课程,如果Google Map API无法加载(例如,带有“警告”窗口),我必须添加一条警告。我浏览了文档,看不到如何添加onerror函数或类似的东西。

我的地图组件是这个

import React from 'react';
import { withGoogleMap, GoogleMap, withScriptjs } from 'react-google-maps';
import MapMarkers from './mapmarkers'


const Map = withScriptjs(withGoogleMap((props)=>{

   return(
      <GoogleMap
        defaultCenter = { {lat: 53.481385, lng: -2.242011} }
        defaultZoom = { 10 }
      >
        <MapMarkers
        query ={props.query}
        parks={props.parks}
        selectedpark={props.selectedpark}
        resetpark ={props.resetpark.bind(this)}
     />
        </GoogleMap>
   )}

));


export default Map;

在app.js中,我有此代码

  <Map
            parks={this.state.parkruns}
            query ={this.state.query}
            selectedpark={this.state.ClickedID}
            resetpark ={this.clearPark.bind(this)}
            googleMapURL='https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXXX_XXXXXXX-XXXXXXXXX'
            loadingElement={<div  style={{ height: `100%` }}tabIndex="-1"/>}
            containerElement={ <div style={{ height: `100vh`, width: '100vw' }}
            role="application"
            tabIndex="-1"
            aria-label="Map showing parkrus in Greater Manchester"
            /> }
            mapElement={ <div style={{ height: `100%` }} tabIndex="-1"/> }
/>

按原样,地图可以正常工作,而标记可以从其他组件正常加载。我只需要添加一个错误警报

再次感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

这是答案。 只需添加此行,并添加警报

window.gm_authFailure = () => {
    }

您可以在底部的Google文档中找到更多信息。 https://developers.google.com/maps/documentation/javascript/events