0

我希望有人可以向我解释这一点。我已经构建了一个 sencha touch 2.2.1 应用程序并将其转换为原生 android 应用程序。

我有一个扩展 Ext.Map 的地图视图，如下所示。当我删除该视图时，该应用程序在我的手机上成功加载。当我再次集成视图时，移动应用程序首先显示白屏，然后显示默认的煎茶主题蓝屏并停留在那里。甚至没有出现加载指示器。

在模拟器中测试 apk 时，一切正常。

在使用地图之前，我将这一行包含在 index.html 中。我将它包含在 HEAD 部分中。然而，在提供的煎茶示例中，它包含在 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 中的脚本标记之前处理视图数据。如果我错了，请纠正我...

于 2013-08-22T08:41:40.350 回答