7

Google マップ用の Ember ビューを作成し、スクリプトをオンデマンドでロードしようとしています。つまり、API を非同期的にロードしています。

ビュー内に 2 つの関数があります。1 つは Google Maps API の読み込みに使用され、もう 1 つはマップの初期化に使用されます。しかし、Google では、API を必要とするリンクを介してコールバック関数を呼び出す必要があるためです。しかし、Ember.JS では正しい結果が得られませんでした。私が得たのは、マップを初期化しようとしたときにオブジェクト「google」が未定義であることを示すエラーメッセージだけです。

これが今のところの Ember ビュー コードです。

App.MapsView = Ember.View.extend({

templateName: 'maps',
map: null,

didInsertElement: function() {
    this._super();
    this.loadGoogleMapsScript();
},

initiateMaps:function(){
    var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(-34.397, 150.644),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(this.$().get(0), mapOptions);
    this.set('map',map);
},

loadGoogleMapsScript: function(){
    var map_callback = this.initiateMaps();

    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=map_callback';
    document.body.appendChild(script);
},

});

このコールバックの問題を解決する方法はありますか? そして、マップを初期化する最適な方法は何ですか? それはテンプレートにあるべきですか、それとも JS からのものですか?

前もって感謝します。

4

1 に答える 1

4

ここには 2 つの問題があります。1 つは、次の行で関数を呼び出していることです。initiateMaps()

var map_callback = this.initiateMaps();

この呼び出しは、Maps API が読み込まれる前に行われるため、未定義のgoogleエラーが発生します。

もう 1 つの問題は、map_callbackこの関数に固有の問題です。Maps API スクリプト URL で使用されるコールバックは、グローバル関数である必要があります。

(この問題はご自身で解決されました。将来の訪問者のためにここに追加するだけです。)

これらの問題の両方を修正するには、その行を次のように変更します。

var self = this;
window.map_callback = function() {
    self.initiateMaps();
}

これを行うには、より「ネイティブな」Ember の方法があるかもしれませんが、いずれにせよ、それでうまくいくはずです。

また、Ember とともに jQuery を使用しているため、次のコードを置き換えることができます。

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=map_callback';
document.body.appendChild(script);

と：

$.getScript( 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=map_callback' );
于 2013-06-13T05:30:12.920 に答える