Question

我希望有人可以向我解释一下。我已经构建了一个sencha touch 2.2.1 app并将其转换为原生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>');
       }
    }
  });

Answer 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 中。它工作正常。试试这个。

Answer 2

我设法通过用我自己的数据覆盖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中的脚本标记之前处理视图数据。如果我错了，请纠正我......

整合谷歌地图时，sencha touch app仍保留在蓝色加载屏幕上

2 个答案: