Question

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>

资产/ 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 .
});

资产/ 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选项卡。

模块资产中的

/ js / gmapsApi.js

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

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

Answer 1

我的本地服务器（vhost）上似乎需要HTTPS协议，因为Google地图仅为通过HTTP（HTTPS协议）视为安全来源的服务器提供apis。

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

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

资产/ JS / gmapsApi.js

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

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

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

1 个答案: