Ember.js 中的谷歌地图答案

【问题标题】：Google Maps inside Ember.jsEmber.js 中的谷歌地图
【发布时间】：2014-03-20 08:24:07
【问题描述】：

我已经成功地在我的主页上渲染了谷歌地图。我对我的一个内页使用了相同的技术。

var MapView = Ember.View.extend({
    layoutName: 'pagelayout',
    didInsertElement : function(){
          var mapOptions = {
            center: new google.maps.LatLng(-34.397, 150.644),
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP
            };
          var map = new google.maps.Map(this.$("#map").get(0),mapOptions);
          this.set('map',map); 
        },
        redrawMap : function(){
          var newLoc = new google.maps.LatLng(this.get('latitude'), this.get('longitude'));
          this.get('map').setCenter(newLoc)
        }.observes('latitude','longitude') 

});

但是，它不会渲染。如果我像这样更改它，它可以工作，但会接管基本的 html 元素。

this.$().get(0) /**from this.$('#map').get(0)**/

我很困惑。考虑到问题可能是 didInsertElement 被触发的太早了（我知道当这个事件触发时这个 View 的整个 DOM 都将可用），我尝试设置一个 afterRender 监听器并触发了地图加载但这也失败了。我已经三次检查了 div 是否存在。

有人可以帮我解决这个问题吗？

【问题讨论】：

标签： javascript google-maps ember.js

【解决方案1】：

我从控制台运行了 Google Maps 初始化代码，发现地图确实加载了，所以 didInsertElement 如何与我的设置配合使用似乎是个问题。我理解当 View 在 DOM 中时调用 didInsertElement 的内容，但可能是因为我使用的是 layouts ，所以它的工作方式不同。

我通过从 div 本身调用一个单独的视图来解决它

{{#view "map"}}

并为地图创建一个新视图。

var MapView = Ember.View.extend({
 /**
 Same as before
**/
});

这只是我的解决方案，可能对面临相同问题的其他人有用。如果有人有更好的解决方案，请添加，以便我验证和投票。

【讨论】：

【解决方案2】：

this.$() 可能不可用，因为视图可能尚未呈现。尝试将其包装在 Ember.run.next 调用中以延迟下一个运行循环周期的执行：

didInsertElement: function() {
    Ember.run.next(this, function() {
        // your code
    });
});

【讨论】：

我试过这样做，但它不起作用。如果我给他们 Maps API 一个尚不存在的 div，我不会在控制台中收到任何错误。
你能不能试试 this.$().find("#map").get(0) 而不是 this.$("#map")。
也不起作用。我也试过 document.getElementById("map")
也许你可以设置一个 jsbin 或 jsfiddle，否则帮助很难。
我认为我已经为地图本身使用不同的视图走上了正确的道路。