5

匿名関数で Google マップを読み込もうとしていますが、API のメソッドのいずれかを使用しようとすると常に JavaScript エラーが発生します。例えば：

コード

var mapOptions = {
      zoom: 8,
      center: new google.maps.LatLng(-34.397, 150.644),
      mapTypeId: google.maps.MapTypeId.ROADMAP
};

エラー

TypeError: google.maps.LatLng is not a constructor

2 つの例を作成しました。

1) これにより、ページの本文の script タグを介して Google マップ js が読み込まれます。このメソッドは機能し、js エラーはありません。 http://jsfiddle.net/malonso/hgPQk/1/

2) これにより、無名関数を使用して Google マップ js が読み込まれます。このメソッドは機能せず、上記の js エラーが含まれています。http://jsfiddle.net/malonso/fZqqW/2/

明らかに何かが欠けていると確信していますが、何がわからないのですか。前もって感謝します。

更新: 匿名関数を使用して Google マップを読み込む必要があることを指摘しておく必要があります。

4

2 に答える 2

9

あなたはこれを行うことができます。URL にコールバック関数名を追加できます。API が読み込まれると呼び出されます。そのコールバック関数は、ドキュメントのスコープ内でアクセスできる必要があります。

jQueryを使用してウィンドウでカスタムイベントをトリガーすることで、少し前にそれを行いました：http://jsfiddle.net/fZqqW/5/

「http://maps.google.com/maps/api/js?sensor=false&callback=gMapsCallback」を使用

window.gMapsCallback = function(){
    $(window).trigger('gMapsLoaded');
}

$(document).ready((function(){
    function initialize(){
        var mapOptions = {
            zoom: 8,
            center: new google.maps.LatLng(-34.397, 150.644),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
    }
    function loadGoogleMaps(){
        var script_tag = document.createElement('script');
        script_tag.setAttribute("type","text/javascript");
        script_tag.setAttribute("src","http://maps.google.com/maps/api/js?sensor=false&callback=gMapsCallback");
        (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
    }
    $(window).bind('gMapsLoaded', initialize);
    loadGoogleMaps();
})());​

API の非同期ロード

ページの読み込みが完了した後、または必要に応じて、Maps API JavaScript コードを読み込むことができます。これを行うには、window.onload イベントまたは関数呼び出しに応答して独自のタグを挿入できますが、Maps JavaScript API ブートストラップに、Maps JavaScript API コードが完全に読み込まれるまでアプリケーション コードの実行を遅らせるように指示する必要があります。 . これは、API の読み込みが完了したときに実行する関数を引数として取る callback パラメーターを使用して行うことができます。

次のコードは、ページが完全に読み込まれた後に (window.onload を使用して) Maps API を読み込み、Maps JavaScript API をページ内のタグに書き込むようにアプリケーションに指示します。さらに、callback=initialize をマップに渡すことで、API が完全にロードされた後にのみ initialize() 関数を実行するよう API に指示します。

ここを参照してください: https://developers.google.com/maps/documentation/javascript/tutorial

于 2012-09-26T12:51:58.283 に答える
0

から返される JavaScript

http://maps.google.com/maps/api/js?sensor=false

への呼び出しが含まれdocument.write()ます。DOM がロードされた後にそれが発生すると、うまくいきません。Google マップ コードをそのように非同期にロードすることは期待できないと思います。

于 2012-09-26T12:50:58.590 に答える