如何判断谷歌地图API加载脚本在React组件内部寻找回调？

在我的rails应用程序中，我使用react.js（react-rails gem）来构建我的应用程序的客户端。
我想使用谷歌地图API来实现一些地理定位功能。如何判断谷歌地图API加载脚本在React组件内部寻找回调？

class HomePage extends React.Component { 
    constructor(props) { 
     super(props) 
    } 

    initGeoTools(){ 
    console.log('callback invoked'); 
    } 

    render() { 
     return(
      <div> 
      //.. 
      <script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initGeoTools" 
async defer></script> 
      </div> 
     ); 
    } 
}

initGeoToolsis不是一个功能 - 这意味着API脚本犯规看到在此范围内的回调函数。

我读过的地方应该在窗口范围中看到这个函数。所以我试图破解它是这样的：

class HomePage extends React.Component { 
    constructor(props) { 
     super(props) 
    } 

    componentWillMount(){ 
    window.initGeoTools = function(){ 
     console.log('callback invoked'); 
    } 
} 

    render() { 
     return(
      <div> 
      //.. 
      <script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initGeoTools" 
async defer></script> 
      </div> 
     ); 
    } 
}

事实上，这工作，但没有道理在这种情况下，因为从窗口定义我没有获得反应成分的东西的功能。

在回调函数中，我想设置状态api_ready：true以指示API已成功加载。

所以问题是我如何告诉API脚本寻找React组件内的回调函数？

来源

2016-09-29 avest

一个星期前，我必须做一个地图组件，我发现this article，他们使用了三个脚本：

一个缓存外部脚本;
一个使用第一个来调用Google Maps Api;
和最后一个是Wrapper组件，您可以使用它与作为道具传递给贴图组件的贴图API进行连接。

来源

2016-09-29 21:25:04

如何判断谷歌地图API加载脚本在React组件内部寻找回调？

回答

相关问题