集成谷歌地图时，sencha touch 应用程序仍处于蓝色加载屏幕答案

【问题标题】：sencha touch app remains on blue loading screen when integrating google maps集成谷歌地图时，sencha touch 应用程序仍处于蓝色加载屏幕
【发布时间】：2013-08-21 08:05:10
【问题描述】：

我希望有人可以向我解释这一点。我已经构建了一个 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>');
       }
    }
  });

【问题讨论】：

标签： google-maps sencha-touch

【解决方案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 中。它工作正常。试试这个。

【讨论】：

maps 脚本已经插入到 microloader 之后，但没有成功。请参考我的回答，看看我是如何解决的......

【解决方案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 中的 script 标签之前处理视图数据。如果我错了，请纠正我...

【讨论】：