2016-05-02 5 views
0

RequireJS + Laravel 5 + Gmaps +非同期=gmaps + requirejs +非同期+ laravel 5:非同期に使用してgmapsを読み込むことができません

を働いていない

誰かが非同期プラグインを使用してロードGoogleマップで私を助けることができますか? 私もgoogプラグインを試しましたが、失敗しました。

これは、次のエラースロー:私は唯一の同期的マップを読み込むことができますが、それは安全ではない enter image description here

を。

<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の

welcome.blade.php/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 /設定:

は、ここに私のコードです。 js

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

requirejs(["gmapsApi"]); 

重要注:パス=資産/のJS/libに/ require.js

をrequire.jsすべてのスクリプトは、私はクロームでソースとネットワーク]タブを確認し、優れたロードされます。モジュールの資産/ JSの中

/gmapsApi.js

動作していない:非同期! http://maps.google.com/maps/api/js?sensor=false

微細加工:http://maps.google.com/maps/api/js?sensor=false

答えて

0

GoogleマップでのみHTTP(HTTPSプロトコル)を介してセキュアな原点として扱われているサーバー用のAPIを提供しているため、HTTPSプロトコルが私のローカルサーバー(バーチャルホスト)上で必要とされているように見えます。だから私のgmapsApi.jsに私も(私はすでにHTTPSプロトコル上の私のローカルサーバーを設定しているため、必要です。)HTTPSプロトコル

資産の上にGoogleマップへのURLを提供https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins

レンタルは、リンクです/js/gmapsApi.js

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

この問題を解決しました。 gmaps apiは非同期にロードされます(非同期プラグインを使用)。

関連する問題