2012-12-27 2 views
3

Google지도 용보기를 만들려고하고 있는데, 실제로 내가 찾은 몇 가지 예에 따라 작동하도록했습니다.Ember.js : Google지도보기

경로가 변경된 후지도가 다시 그려지는 경우 페이지가 처음 표시 될 때만지도가 올바르게 표시된다는 것은 문제가 "왜곡되어 보이는"것입니다.

내가 본 예는 앱의 '한 페이지'부분입니다.

보기 :

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}}와지도를 보여줍니다. 나는 또한 "수정"을 사업부로이 CSS를 적용

부트 스트랩은지도 컨트롤 덤비는 :

#map-holder img { 
    max-width: none; 
} 

어떻게이 문제를 해결할 수 있습니까?

편집 : jsfiddle - http://jsfiddle.net/bsphere/jYfg3/ 이 '설정'으로 이동 한 다음 다시 '지도'에 정확히 엠버와 관련이없는이 보인다 왜곡 된지도

+0

문제를 보여주는 "작동하는"jsfiddle을 제공 할 수 있습니까? –

+0

jsfiddle - http://jsfiddle.net/bsphere/jYfg3/ '설정'으로 이동 한 다음 '지도'로 돌아 가면 왜곡 된지도를 볼 수 있습니다. –

답변

2

을 볼 수 있지만,지도 다시 그리기와 크기를 조정합니다. 바이올린을 사용하면 브라우저 창 크기를 조정하면지도가 올바르게 표시됩니다. 내가 그것을 보았을 때, 나는지도가 찢어지기 전에 this.$().css({ width: "550px", height: "400px" });을 넣으려고했다.