5

Google の基本的な例を勉強して Google マップを作成する方法を学んでいます。

基本的にスクリプトをコピーして head タグに貼り付けたところ、firebug コンソールから次のエラーが返されました。

ReferenceError: google is not defined

Google マップ スクリプトと共に、次のいくつかのスクリプトをヘッドにロードしました。エラーが発生する理由がわかりません。

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

    <!-- nmr is used to write my own scripts -->
    <script>var nmr = jQuery.noConflict();</script>

    <!-- Google Map scripts -->
    <script>
        function initialize() {
            var mapOptions = {
                zoom: 13,
                center: new google.maps.LatLng(-34.397, 150.644),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            var map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);
        };

        function loadScript() {
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyB7CgOuhFLDkh2VAGW1S2Y" + "sensor=false" + "callback=initialize";
            document.body.appendChild(script);
        }

        window.onload = loadScript;

    </script>

これも初期化関数の前に追加しようとしましたが、うまくいきませんでした。

<script> var google = jQuery.noConflict(); </script>

誰でも助けることができますか？ありがとう！

4

2 に答える 2

1

コードで何が起こっているか見てみましょう。

1) とにかく、投稿されたコード内で使用されていないため、ajax.googleapis.com を無視します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

2) エラーをスローするオブジェクト google は、Google マップ 3 API 自体によって定義されており、jQuery とは何の関係もありません。さらに言えば、API v3 は jQuery を使用しないため、以下の行を次のようにする必要があります。私たちの目の前の問題とは何の関係もないので削除されました。

<script> var google = jQuery.noConflict(); </script>

3) ブラウザがページにアクセスしたときに JavaScript から最初に呼び出されるのは、

window.onload = loadScript;

4)では、上記の行は実際にはどういう意味ですか? windows.onload は、画像、スタイル、スクリプト、およびその他の依存リソースを含むすべての外部ファイルが読み込まれた後、DOM が読み込まれてレンダリングされ、アクションの準備が整ってからしばらく経ってから遅く発生します。

そして、ここからが本題です。windows.onload が loadScript 関数を呼び出した後、

 script.src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyB7CgOuhFLDkh2VAGW1S2Y" + "sensor=false" + "callback=initialize";

（ちなみに、クエリ文字列には、クエリ変数の間にあるすべての「&記号」がありません.... /js?v=3&key=xyz&sensor=false&callback=initialize <---正しい形式です

5) 待望の Google API。いいえ。URL自体にapiという単語があるにもかかわらず、APIのローダーのみを追加します。上記のファイルを開いて内部を確認すると、document.write と、ローダーを呼び出すクエリ文字列パラメーターに基づいて条件付きで読み込まれる API のさまざまな部分のブロックが表示されます。

6) それで、それはどういう意味ですか? Google API を取得していると考えて初期化関数を呼び出していますが、取得しているのは、Google オブジェクトの定義を含む API を含む Google API ローダーだけです。そのため、Maps API がアタッチされる前にコールバックが起動されるため、initialize() コールバック関数が起動されると google は未定義になります。

ソリューション

初期関数をロードする別の方法を使用する doktormolle ソリューションについては、こちらをご覧ください --> http://jsfiddle.net/doktormolle/7cu2F/

そして、仲介者をバイパスして、Googleマップローダーをページに実際に追加するソリューションについては、ここにあります-> http://jsfiddle.net/doktormolle/zJ5em/

于 2014-07-12T06:32:11.360 に答える