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

Posted 2023-02-26

【中文标题】集成谷歌地图时，sencha touch 应用程序仍处于蓝色加载屏幕

【英文标题】：sencha touch app remains on blue loading screen when integrating google maps

【发布时间】：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>');
       
    
  );

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