我正在尝试为谷歌地图创建一个视图,并根据我找到的一些示例实际让它工作。
问题是地图仅在页面第一次显示时正确绘制,如果路线改变然后再次绘制地图,它看起来“扭曲”。
我发现的示例是应用程序的“一页”部分。
看法:
App.LocationView = Ember.View.extend({
templateName: 'location',
MapView: Ember.View.extend({
map: null,
latitudeBinding: 'controller.content.geometry.lat',
longitudeBinding: 'controller.content.geometry.lng',
didInsertElement: function() {
var mapOptions = {
center: new google.maps.LatLng(0, 0),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};
var map = new google.maps.Map(this.$().get(0),mapOptions);
this.set('map',map); //save for future updations
this.$().css({ width: "550px", height: "400px" });
},
reRenderMap : function(){
var newLoc = new google.maps.LatLng(this.get('latitude'), this.get('longitude'));
this.get('map').setCenter(newLoc);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(this.get('latitude'), this.get('longitude')),
map: this.get('map')
});
}.observes('latitude','longitude')
})
});
我{{view view.MapView}}
在我的“位置”模板中显示带有 div#map-holder 的地图。
我还将这个 CSS 应用到 div 以“修复”Bootstrap 与地图控件混淆:
#map-holder img {
max-width: none;
}
我怎样才能解决这个问题 ?
编辑:jsfiddle - http://jsfiddle.net/bsphere/jYfg3/ 转到“设置”,然后返回“地图”查看扭曲的地图