2011-02-15 134 views
2

我正在試驗sancha js lib,並建立一個離線iphone4應用程序。 類型錯誤::緩存谷歌地圖與HTML5的iPhone離線使用錯誤

iPhone(的iOS 4)iphone狩獵內訪問它時報告錯誤表達的結果「google.maps.LatLng」 [未定義]不是一個構造

這是我的索引.html文件:

<!DOCTYPE html> 
<html manifest="maptest.manifest"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>Map</title> 
     <link rel="stylesheet" href="sencha-touch.css" type="text/css"> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 
     <script type="text/javascript" src="sencha-touch-debug.js"></script> 
     <script type="text/javascript" src="plugins/GmapTracker.js"></script> 
     <script type="text/javascript" src="plugins/GmapTraffic.js"></script> 
     <script type="text/javascript" src="index.js"></script> 
</head> 
<body> 
</body> 
</html> 

清單:
maptest.manifest

CACHE MANIFEST 
# VERSION 1.2 
NETWORK: 
* 
CACHE: 
index.html 
sencha-touch.css 
http://maps.google.com/maps/api/js?sensor=true 
plugins/GmapTracker.js 
plugins/GmapTraffic.js 
sencha-touch-debug.js 
index.js 

index.js:

Ext.setup({ 
    tabletStartupScreen: 'tablet_startup.png', 
    phoneStartupScreen: 'phone_startup.png', 
    icon: 'icon.png', 
    glossOnIcon: false, 
    onReady: function() { 

     // The following is accomplished with the Google Map API 
     var position = new google.maps.LatLng(37.44885,-122.158592), //Sencha HQ 

      infowindow = new google.maps.InfoWindow({ 
       content: 'Sencha Touch HQ' 
      }), 

       //Tracking Marker Image 
       image = new google.maps.MarkerImage(
        'point.png', 
        new google.maps.Size(32, 31), 
        new google.maps.Point(0,0), 
        new google.maps.Point(16, 31) 
       ), 

       shadow = new google.maps.MarkerImage(
        'shadow.png', 
        new google.maps.Size(64, 52), 
        new google.maps.Point(0,0), 
        new google.maps.Point(-5, 42) 
       ), 

      trackingButton = Ext.create({ 
       xtype : 'button', 
       iconMask: true, 
       iconCls : 'locate' 
      }), 

      toolbar = new Ext.Toolbar({ 
        dock: 'top', 
        xtype: 'toolbar', 
        ui : 'light', 
        defaults: { 
         iconMask: true 
        }, 
        items : [ 
        { 
         position : position, 
         iconCls : 'home', 
         handler : function(){ 
         //disable tracking 
          trackingButton.ownerCt.setActive(trackingButton, false); 
          mapdemo.map.panTo(this.position); 
         } 
        },{ 
        xtype : 'segmentedbutton', 
        allowMultiple : true, 
        listeners : { 
         toggle : function(buttons, button, active){ 
          if(button.iconCls == 'maps'){ 
           mapdemo.traffic[active ? 'show' : 'hide'](); 
          }else if(button.iconCls == 'locate'){ 
           mapdemo.geo[active ? 'resumeUpdates' : 'suspendUpdates'](); 
          } 
         } 
        }, 
        items : [ 
         trackingButton, 
          { 
            iconMask: true, 
            iconCls: 'maps' 
           } 
        ] 
       }] 
       }); 

     mapdemo = new Ext.Map({ 

      mapOptions : { 
       center : new google.maps.LatLng(37.381592, -122.135672), //nearby San Fran 
       zoom : 12, 
       mapTypeId : google.maps.MapTypeId.ROADMAP, 
       navigationControl: true, 
       navigationControlOptions: { 
         style: google.maps.NavigationControlStyle.DEFAULT 
        } 
      }, 

      plugins : [ 
       new Ext.plugin.GMap.Tracker({ 
         trackSuspended : true, //suspend tracking initially 
         highAccuracy : false, 
         marker : new google.maps.Marker({ 
          position: position, 
          title : 'My Current Location', 
          shadow: shadow, 
          icon : image 
          }) 
       }), 
       new Ext.plugin.GMap.Traffic({ hidden : true }) 
      ], 

      listeners : { 
       maprender : function(comp, map){ 
        var marker = new google.maps.Marker({ 
            position: position, 
            title : 'Sencha HQ', 
            map: map 
           }); 

           google.maps.event.addListener(marker, 'click', function() { 
            infowindow.open(map, marker); 
           }); 

        setTimeout(function(){ map.panTo (position); } , 1000); 
       } 

      } 
     }); 

     new Ext.Panel({ 
      fullscreen: true, 
      dockedItems: [toolbar], 
      items: [mapdemo] 
     }); 

    } 
}); 

回答

3

查找到http://maps.google.com/maps/api/js?sensor=true,你會看到,它動態加載腳本到您的網頁。理論上,您也必須緩存所有這些腳本URL。

但是,沒有辦法使離線的交互式地圖可用。它將在用戶交互期間動態地加載資源。如果您的應用程序處於脫機狀態,這將不起作用