0

誰かが私にこれを説明してくれることを願っています。sencha touch 2.2.1 アプリをビルドし、それをネイティブ Android アプリに変換しました。

以下に示すように、Ext.Map を拡張するマップ ビューがあります。そのビューを削除すると、アプリがモバイルに正常に読み込まれます。ビューを再度統合すると、モバイル アプリは最初に白い画面を表示し、次にデフォルトの sencha テーマの青い画面を表示してそこにとどまります。ローディングインジケータすら表示されません。

エミュレーターで apk をテストすると、すべて正常に動作します。

マップを使用する前に、この行を index.html に含めました。HEAD セクションに含めました。ただし、提供されている sencha の例では、BODY セクションに含まれています。違いはありますか？

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

ここに私のファイルがあります：

コントローラ：

    Ext.define('EntityApp.controller.Map', {
     extend : 'Ext.app.Controller',
     requires : 'Ext.device.Connection',

     config : {
        refs    : {
            map : '.mappanel'
         },

         control : {
             map: {
                 initialize: 'initMap'
             }
          }
      },

   initMap: function () {
     var me = this;
     var gMap = me.getMap();
      gMap.on('maprender', this.onMapRender, this, {single : true});
    },

    onMapRender: function(e) {
      if (Ext.device.Connection.isOnline()) {
        var latLngCoordinates = new google.maps.LatLng(<value>, <value>);
        marker = new google.maps.Marker({
                position: latLngCoordinates,
                animation: google.maps.Animation.DROP,
                map: this.getMap().getMap()
            });
        this.getMap().getMap().setMapTypeId(google.maps.MapTypeId.ROADMAP);
        this.getMap().setMapCenter(latLngCoordinates);
        this.getMap().getMap().setZoom(17);
    }
  }
 });

意見：

    Ext.define('EntityApp.view.Map', {
     extend: 'Ext.Map',
     xtype: 'mappanel',
     config: {
        layout: 'fit',
        iconCls: 'icon-location',
        title: 'Location',
        useCurrentLocation: false,
        styleHtmlContent: true,
        items: {
           docked: 'top',
           xtype: 'titlebar',
           title: 'Location'
        },
        mapOptions: {
           center: !(window.google || {}).maps ? null : new google.maps.LatLng(<value>, <value>),
         zoom: 17
      }
},
   constructor: function(config) {
       this.callParent(config);
       if (!(window.google || {}).maps) {
             this.setHtml('<p id="maperror">Internet Connection Required!</p>');
       }
    }
  });
4

2 に答える 2

1

私も同じエラーが発生していますが、追加するだけです

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

後にタグを付ける

<script id="microloader" type="text/javascript" src="touch/microloader/development.js"></script>

私のindex.htmlで。それは正常に動作します。これを試して。

于 2013-08-23T13:24:01.910 に答える
0

Ext.Map を自分のデータでオーバーライドすることで、上記の問題を解決できました。

また、mymap という名前のカスタム xtype を割り当てましたが、xtype:'mymap'以下に示すように、これを行うだけで、マップ コンポーネントがカスタム データと共に読み込まれます。

   Ext.define('App.view.Map', {
    extend: 'Ext.Panel',
      xtype: 'mappanel',
      config: {
           layout: 'fit',
           iconCls: 'icon-location',
           title: 'Location',
           useCurrentLocation: false,
           styleHtmlContent: true,
           items: [
               { docked: 'top', xtype: 'titlebar', title: 'Location' },
               { xtype: 'mymap' }
           ]
       }
   });

sencha は index.html の script タグの前にビュー データを処理しているようです。間違っていたら訂正...

于 2013-08-22T08:41:40.350 に答える