Question

即使我确实加载了谷歌库（至少我从Chrome开发工具中看到），我仍然不断获得'google' not defined。

我正试图点击google places api获取一个非常简单的前端网页。在学习前端Web开发（包括反应）时，我已经学会了如何基本使用npm，以及导入和所有，但是使用外部库给我带来了麻烦。

我应该能够通过我的index.html

加载谷歌地方库

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBq8oeYyntc6d0JP5iaqMtPMTBhxiItdJw&libraries=places"></script>

但现在我正试图在ReactDOM.render(...)之前的index.js中使用little-loader

import LittleLoader from 'little-loader';

LittleLoader(
    "https://maps.googleapis.com/maps/api/js?key=AIzaSyBq8oeYyntc6d0JP5iaqMtPMTBhxiItdJw&libraries=places", 
    function (err) {
        console.log("hi paul!");

        // This is just to check I *have* the google library loaded/working
        var pyrmont = new google.maps.LatLng(-33.8665433,151.1956316);
});

在线的所有示例似乎都暗示这应该有效（无论是使用标记还是至少在little-loader的回调中）。但无论我做什么，我都会./src/index.js Line 14: 'google' is not defined no-undef。我做在chrome dev console-＆gt;来源中查看google地图库，如果我只是在控制台中键入google，我会得到一个对象。

那么......我如何在我的普通javascript中使用谷歌库...？我最好的猜测是我以某种方式推迟/异步加载，但是对google.maps.LatLng...的使用设置setTimeout没有帮助。

我正试图找出这个前端开发世界。我有点迷失在ES6的思维方式中。我确信这很容易，但我很挣扎！

Answer 1

尝试将脚本添加到主index.html文件中。它应该可以在整个应用程序中使用。

Answer 2

google maps API异步初始化，直到发生两件事情才能使用它：

Google地图API的代码是通过您的LittleLoader()函数加载的。
Google地图完成了自己的异步初始化。

了解两者何时完成的一种方法是在Google Maps API网址中指定callback=xxxx查询参数。然后，当它完成加载后，它将调用该函数，然后您可以使用Google地图的所有功能。当完成上述两个项目时，将调用该回调。

从'little-loader'导入LittleLoader;

function initMap() {
    // This is just to check I *have* the google library loaded/working
    var pyrmont = new google.maps.LatLng(-33.8665433,151.1956316);
}

LittleLoader(
    "https://maps.googleapis.com/maps/api/js?key=AIzaSyBq8oeYyntc6d0JP5iaqMtPMTBhxiItdJw&libraries=places&callback=initMap", 
    function (err) {
        console.log("hi paul!");
});

您可以在此处看到此类示例：https://developers.google.com/maps/documentation/javascript/tutorial。

我怀疑需要从全局范围访问回调函数才能使其正常工作。

使用动态脚本加载的类似示例：http://jsfiddle.net/doktormolle/7cu2F/

而且，同样的事情：Dynamically Loading Google Maps api's

带有es6 / react的外部库出现为“未定义”

2 个答案: