Javascript 谷歌地图加载API脚本并在ember.js视图中初始化
我正在尝试为GoogleMaps创建一个Ember视图,并按需加载脚本,即异步加载API 我在视图中有两个函数,一个用于加载GoogleMapsAPI,另一个用于初始化地图。但是由于Google要求我通过需要API的链接调用回调函数。但是在Ember.JS中,我无法得到正确的结果。我所得到的只是一条错误消息,说明在初始化地图时对象“google”未定义 以下是目前的余烬视图代码Javascript 谷歌地图加载API脚本并在ember.js视图中初始化,javascript,google-maps,callback,ember.js,Javascript,Google Maps,Callback,Ember.js,我正在尝试为GoogleMaps创建一个Ember视图,并按需加载脚本,即异步加载API 我在视图中有两个函数,一个用于加载GoogleMapsAPI,另一个用于初始化地图。但是由于Google要求我通过需要API的链接调用回调函数。但是在Ember.JS中,我无法得到正确的结果。我所得到的只是一条错误消息,说明在初始化地图时对象“google”未定义 以下是目前的余烬视图代码 App.MapsView = Ember.View.extend({ templateName: 'maps', m
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\u回调
是此函数的本地调用。Maps API脚本URL中使用的回调必须是全局函数
(你自己解决了这个问题;我只是为了将来的访问者的利益才在这里添加它。)
解决这两个问题的方法是将该行更改为:
var self = this;
window.map_callback = function() {
self.initiateMaps();
}
也许有一种更“本地”的余烬方法可以做到这一点,但无论如何,这应该可以做到
另外,由于您将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);
与:
谢谢你,迈克尔!我试过了,但还是有错误。它说“uncaughtypeerror:Object”没有方法“map\u callback”。我认为这是因为当它调用$.getScript时,回调将绑定到窗口对象并导致该错误。有什么办法吗?我想出来了!它可以通过将回调函数附加到窗口对象来工作。已经解决了这个问题,在这里做笔记以防有人遇到同样的问题。回调函数应该声明并绑定到窗口对象。请参阅下面的代码:window.map_callback=function(){self.initialize();}它可以工作。。。
$.getScript( 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=map_callback' );