2017-03-11 2 views
1

Ext.js 프레임 워크를 사용하는 방법을 배우고 MVVM 모델을 사용하여 간단한 응용 프로그램을 작성합니다. 나는 단순한 Map을 만들었고 그것을 계승하려고 노력 중이다. 나는 Google API와 GMapPanel 위젯을 사용하는 애플리케이션을 만들었으며, 이제는 새로운 스타일을 만들고 추가하고 싶다.하지만 내 의상 스타일을 추가하는 데 문제가있다. .내지도에서 스타일을 변경하십시오.

Uncaught TypeError: Cannot read property 'set' of undefined at constructor.init (MapController.js?_dc=20151109082919:198) at new constructor (ext-all-rtl-debug.js?_dc=20151109082919:63176) at constructor [as self] (ext-all-rtl-debug.js?_dc=20151109082919:12296) at Object.widget (ext-all-rtl-debug.js?_dc=20151109082919:14662) at constructor.create (ext-all-rtl-debug.js?_dc=20151109082919:26228) at constructor.lookupComponent (ext-all-rtl-debug.js?_dc=20151109082919:123938) at constructor.prepareItems (ext-all-rtl-debug.js?_dc=20151109082919:124418) at constructor.add (ext-all-rtl-debug.js?_dc=20151109082919:123436) at constructor.initItems (ext-all-rtl-debug.js?_dc=20151109082919:123861) at constructor.initComponent (ext-all-rtl-debug.js?_dc=20151109082919:123821)

내 코드 :

내가 다음과 같은 오류가 나타납니다

init: function() { 

    var me = this, 
     map = me.getView(), //Reference to map view 
     store = map.getViewModel().getStore('Markers'), // Get the store from the ViewModel 
     markers = [], // Create and empty markers array 
     data; 
    // Load the store 
    store.load(function (records) { 
     // Iterate through each record 
     Ext.each(records, function (record) { 
      data = record.getData(); // Get the data object from each record 
      markers.push(data); // Push the objects onto the markers array 
     }); 
    }); 
    map.markers = markers; // Set the markers config for the Map component to the markers array 

    var styledMapType = new google.maps.StyledMapType(
     [ 
      {elementType: 'geometry', stylers: [{color: '#ebe3cd'}]}, 
      {elementType: 'labels.text.fill', stylers: [{color: '#523735'}]}, 
      {elementType: 'labels.text.stroke', stylers: [{color: '#f5f1e6'}]}, 
      { 
      featureType: 'administrative', 
      elementType: 'geometry.stroke', 
      stylers: [{color: '#c9b2a6'}] 
      }, 
      { 
      featureType: 'administrative.land_parcel', 
      elementType: 'geometry.stroke', 
      stylers: [{color: '#dcd2be'}] 
      }, 
      { 
      featureType: 'administrative.land_parcel', 
      elementType: 'labels.text.fill', 
      stylers: [{color: '#ae9e90'}] 
      }, 
      { 
      featureType: 'landscape.natural', 
      elementType: 'geometry', 
      stylers: [{color: '#dfd2ae'}] 
      }, 
      { 
      featureType: 'poi', 
      elementType: 'geometry', 
      stylers: [{color: '#dfd2ae'}] 
      }, 
      { 
      featureType: 'poi', 
      elementType: 'labels.text.fill', 
      stylers: [{color: '#93817c'}] 
      }, 
      { 
      featureType: 'poi.park', 
      elementType: 'geometry.fill', 
      stylers: [{color: '#a5b076'}] 
      }, 
      { 
      featureType: 'poi.park', 
      elementType: 'labels.text.fill', 
      stylers: [{color: '#447530'}] 
      }, 
      { 
      featureType: 'road', 
      elementType: 'geometry', 
      stylers: [{color: '#f5f1e6'}] 
      }, 
      { 
      featureType: 'road.arterial', 
      elementType: 'geometry', 
      stylers: [{color: '#fdfcf8'}] 
      }, 
      { 
      featureType: 'road.highway', 
      elementType: 'geometry', 
      stylers: [{color: '#f8c967'}] 
      }, 
      { 
      featureType: 'road.highway', 
      elementType: 'geometry.stroke', 
      stylers: [{color: '#e9bc62'}] 
      }, 
      { 
      featureType: 'road.highway.controlled_access', 
      elementType: 'geometry', 
      stylers: [{color: '#e98d58'}] 
      }, 
      { 
      featureType: 'road.highway.controlled_access', 
      elementType: 'geometry.stroke', 
      stylers: [{color: '#db8555'}] 
      }, 
      { 
      featureType: 'road.local', 
      elementType: 'labels.text.fill', 
      stylers: [{color: '#806b63'}] 
      }, 
      { 
      featureType: 'transit.line', 
      elementType: 'geometry', 
      stylers: [{color: '#dfd2ae'}] 
      }, 
      { 
      featureType: 'transit.line', 
      elementType: 'labels.text.fill', 
      stylers: [{color: '#8f7d77'}] 
      }, 
      { 
      featureType: 'transit.line', 
      elementType: 'labels.text.stroke', 
      stylers: [{color: '#ebe3cd'}] 
      }, 
      { 
      featureType: 'transit.station', 
      elementType: 'geometry', 
      stylers: [{color: '#dfd2ae'}] 
      }, 
      { 
      featureType: 'water', 
      elementType: 'geometry.fill', 
      stylers: [{color: '#b9d3c2'}] 
      }, 
      { 
      featureType: 'water', 
      elementType: 'labels.text.fill', 
      stylers: [{color: '#92998d'}] 
      } 
     ], 
     {name: 'Styled Map'}); 


    map.mapTypes.set('styled_map', styledMapType); 
    map.setMapTypeId('styled_map'); 



} 

답변

2

당신은 단순히 gmappanel의 MapOptions 사용에 스타일 배열을 추가 할 수 있습니다 개체 :

{ 
    region: 'center', 
    xtype: 'gmappanel', 
    gmapType: 'map', 
    center: new google.maps.LatLng(53.419824, -3.0509294), 
    mapOptions: { 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     zoom: 15, 
     styles: [ 
      {elementType: 'geometry', stylers: [{color: '#ebe3cd'}]}, 
      {elementType: 'labels.text.fill', stylers: [{color: '#523735'}]}, 
      {elementType: 'labels.text.stroke', stylers: [{color: '#f5f1e6'}]}, 
      { 
       featureType: 'administrative', 
       elementType: 'geometry.stroke', 
       stylers: [{color: '#c9b2a6'}] 
      }, 
      { 
       featureType: 'administrative.land_parcel', 
       elementType: 'geometry.stroke', 
       stylers: [{color: '#dcd2be'}] 
      }, 
      { 
       featureType: 'administrative.land_parcel', 
       elementType: 'labels.text.fill', 
       stylers: [{color: '#ae9e90'}] 
      }, 
      { 
       featureType: 'landscape.natural', 
       elementType: 'geometry', 
       stylers: [{color: '#dfd2ae'}] 
      }, 
      { 
       featureType: 'poi', 
       elementType: 'geometry', 
       stylers: [{color: '#dfd2ae'}] 
      }, 
      { 
       featureType: 'poi', 
       elementType: 'labels.text.fill', 
       stylers: [{color: '#93817c'}] 
      }, 
      { 
       featureType: 'poi.park', 
       elementType: 'geometry.fill', 
       stylers: [{color: '#a5b076'}] 
      }, 
      { 
       featureType: 'poi.park', 
       elementType: 'labels.text.fill', 
       stylers: [{color: '#447530'}] 
      }, 
      { 
       featureType: 'road', 
       elementType: 'geometry', 
       stylers: [{color: '#f5f1e6'}] 
      }, 
      { 
       featureType: 'road.arterial', 
       elementType: 'geometry', 
       stylers: [{color: '#fdfcf8'}] 
      }, 
      { 
       featureType: 'road.highway', 
       elementType: 'geometry', 
       stylers: [{color: '#f8c967'}] 
      }, 
      { 
       featureType: 'road.highway', 
       elementType: 'geometry.stroke', 
       stylers: [{color: '#e9bc62'}] 
      }, 
      { 
       featureType: 'road.highway.controlled_access', 
       elementType: 'geometry', 
       stylers: [{color: '#e98d58'}] 
      }, 
      { 
       featureType: 'road.highway.controlled_access', 
       elementType: 'geometry.stroke', 
       stylers: [{color: '#db8555'}] 
      }, 
      { 
       featureType: 'road.local', 
       elementType: 'labels.text.fill', 
       stylers: [{color: '#806b63'}] 
      }, 
      { 
       featureType: 'transit.line', 
       elementType: 'geometry', 
       stylers: [{color: '#dfd2ae'}] 
      }, 
      { 
       featureType: 'transit.line', 
       elementType: 'labels.text.fill', 
       stylers: [{color: '#8f7d77'}] 
      }, 
      { 
       featureType: 'transit.line', 
       elementType: 'labels.text.stroke', 
       stylers: [{color: '#ebe3cd'}] 
      }, 
      { 
       featureType: 'transit.station', 
       elementType: 'geometry', 
       stylers: [{color: '#dfd2ae'}] 
      }, 
      { 
       featureType: 'water', 
       elementType: 'geometry.fill', 
       stylers: [{color: '#b9d3c2'}] 
      }, 
      { 
       featureType: 'water', 
       elementType: 'labels.text.fill', 
       stylers: [{color: '#92998d'}] 
      } 
     ] 
    } 
} 
관련 문제