javascript - 谷歌地图加载 API 脚本并在 ember.js View 中初始化

Question

我正在尝试为 Google map 创建一个 Ember View ，并以按需方式加载脚本，即异步加载 API。

我在 View 中有两个函数，一个用于加载 Google Maps API，另一个用于初始化 map 。但是由于谷歌要求我通过需要API的链接调用回调函数。但是在 Ember.JS 中，我无法得到正确的结果。我得到的只是一条错误消息，指出在尝试初始化 map 时对象“google”未定义。

现在这是 Ember View 代码。

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);
},

});

有什么办法可以解决这个回调问题吗？而且，初始化 map 的最佳方式是什么？它应该在模板中还是来自 JS？

提前致谢。

Answer 1

这里有两个问题。一是您在这一行中调用您的 initiateMaps() 函数:

var map_callback = this.initiateMaps();

此调用是在加载 Maps API 之前进行的，导致未定义的 google 错误。

另一个问题是 map_callback 是这个函数的局部变量。 Maps API 脚本 URL 中使用的回调必须是全局函数。

(您自己解决了这个问题；我只是将其添加到此处以方便 future 的访问者。)

解决这两个问题的方法是将该行更改为:

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

可能有一种更“原生”的 Ember 方法可以做到这一点，但在任何情况下都应该可以解决问题。

此外，由于您将 jQuery 与 Ember 一起使用，您可以替换此代码:

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' );