我正在尝试根据Event对象的位置显示嵌入的Google Map。
这是基本的应用程序:
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>
我在哪里初始化 map ?此外,如果经纬度发生变化,我将如何捕捉并重新绘制 map ?
工作 View 代码(从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
});
最佳答案
这是一个简单的想法,不遵循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);
}
});
避免所谓的chromosomal mutation in Ember