Google地图加载API脚本并在ember.js视图内进行初始化

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

我在视图中有两个函数，一个用于加载Google Maps API，另一个用于初始化地图。 但是由于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？

提前致谢。

---

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

var map_callback = this.initiateMaps();

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

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

（你自己解决了这个问题;我只是为了未来的访问者而添加它。）

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

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

链接地址: http://www.djcxy.com/p/71865.html

上一篇: Google Maps load API script and initialize inside ember.js view

下一篇: How to align components center in the JPanel using GridBagLayout?