在视图中使用Ember.js和Google地图

Question

我将尝试基于事件对象的位置显示嵌入式Google地图。

这是基本应用程序：

App = Em.Application.create();

App.Event = Em.Object.extend({
    lat: -33.8665433,
    lng: 151.1956316
});

App.EventController = Ember.ObjectController.extend();

App.ApplicationController = Ember.ObjectController.extend();

App.EventView = Ember.View.extend({
    templateName: 'event'
});

App.ApplicationView = Ember.View.extend({
    templateName: 'application'
});

App.Router = Ember.Router.extend({
    enableLogging: true,
    root: Ember.Route.extend({
        event: Ember.Route.extend({
            route: '/',
            connectOutlets: function (router) {
                router.get('eventController').set('content', App.Event.create());
                router.get('applicationController').connectOutlet('event');
            }
        })
    })
});

App.initialize();

使用以下模板：

<script type="text/x-handlebars" data-template-name="application">
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="event">
    {{lat}} {{lng}}
    // Embeded Google Map
</script>

我应该在哪里初始化地图？此外，如果纬度/经度发生变化，我该如何捕获并重新绘制地图？

工作视图代码（修改自sabithpocker的答案）

App.EventView = Ember.View.extend({
    templateName: 'event',
    map: null,
    latitudeBinding: 'controller.content.lat',
    longitudeBinding: 'controller.content.lng',
    didInsertElement: function () {
        var mapOptions = {
            center: new google.maps.LatLng(this.get('latitude'), this.get('longitude')),
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(this.$().get(0), mapOptions);
        this.set('map', map); //save for future updations
        this.$().css({ width: "400px", height: "400px" });
    },
    reRenderMap: function () {
        if (this.get('map')) {
            var newLoc = new google.maps.LatLng(this.get('latitude'), this.get('longitude'));
            this.get('map').setCenter(newLoc);
        }
    }.observes('latitude', 'longitude') //these are bound to lat/lng of Event
});

- Mike Davis

Answer 1

这里有一个快速的想法，不遵循Ember应用程序结构，只是一个想法。

App.EventView = Ember.View.extend({
    templateName: 'event',
    map : null,
    latitudeBinding : 'App.Event.lat',
    longitudeBinding : 'App.Evet.lng',
    didInsertElement : function(){
      var mapOptions = {
        center: new google.maps.LatLng(this.get('latitude'), this.get('longitude')),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
        };
      var map = new google.maps.Map(this.$().get(0),mapOptions);
      this.set('map',map); //save for future updations
    },
    reRenderMap : function(){
      var newLoc = new google.maps.LatLng(this.get('latitude'), this.get('longitude'));
      this.get('map').setCenter(newLoc)
      }.observes('latitude','longitude') //these are bound to lat/lng of Event
});

同时我认为App.Event应该是：

App.Event = Em.Object.extend({
    lat: null,
    lng: null,
    init : function(){
      this.set('lat', -33.8665433);
      this.set('lng', 151.1956316);
      }
});

为了避免在Ember中所谓的染色体突变，

- sabithpocker

---

非常感谢！我已经更新了问题，附上最终的视图代码（唯一的区别是我将其绑定到eventController的content属性）。 - Mike Davis