gmaps + requirejs + async + laravel 5：无法使用异步加载 gmap答案

【问题标题】：gmaps + requirejs + async + laravel 5 : Cannot load gmaps using asyncgmaps + requirejs + async + laravel 5：无法使用异步加载 gmap
【发布时间】：2016-05-02 13:37:42
【问题描述】：

RequireJS + Laravel 5 + Gmaps + async = 不工作

有人可以帮助我使用异步插件加载谷歌地图吗？我也尝试过 goog 插件，但也没成功。

它会引发以下错误：

我只能同步加载地图，但它不安全。

这是我的代码：

welcome.blade.php

<head>
    <title>Roads API Demo</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="{{ URL::asset('assets/css/style.css') }}">
    <script data-main="{{ URL::asset('assets/js/config') }}" type="application/javascript" src="{{ URL::asset('assets/js/lib/require.js') }}"></script>
</head>

assets/js/gmapsApi.js

define(['async!http://maps.google.com/maps/api/js?sensor=false'], function() {
    console.log("HIIIIIIIIIIIIII");

    // When I delete async and put only
    // http://maps.google.com/maps/api/js?sensor=false
    // Then works fine .
});

assets/js/config.js

requirejs.config({
    baseUrl: "assets/js/lib", //require.js path=assets/js/lib/require.js
    paths: {
      main: "../main",
      gmapsApi : "../gmapsApi"
    },
    waitSeconds: 0
});

requirejs(["gmapsApi"]);

重要提示：require.js path=assets/js/lib/require.js

所有脚本都加载良好，我在 chrome 中检查了 Sources 和 Network 选项卡。

在模块 assets/js/gmapsApi.js 中

不工作：异步！http://maps.google.com/maps/api/js?sensor=false

工作正常：http://maps.google.com/maps/api/js?sensor=false

【问题讨论】：

标签： google-maps asynchronous laravel-5 requirejs

【解决方案1】：

我的本地服务器（虚拟主机）上似乎需要 HTTPS 协议，因为 google 地图仅为通过 HTTP（HTTPS 协议）被视为安全来源的服务器提供 API。

招聘链接：https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins

所以在我的 gmapsApi.js 中，我还通过 https 协议提供了谷歌地图的 url（这是必需的，因为我已经在 https 协议上设置了我的本地服务器）

assets/js/gmapsApi.js

    define(['async!https://maps.googleapis.com/maps/api/js?v=3&libraries=places'], function() {
        console.log("HIIIIIIIIIIIIII");
    });

这为我解决了问题。并且 gmaps api 是异步加载的（使用 async 插件）。

【讨论】：