Question

我正在尝试使用sancha js lib，并建立一个离线的iphone4应用程序。

iPhone（iOS 4）在iphone safari中访问时报告错误： TypeError：表达式'google.maps.LatLng'[undefined]的结果不是构造函数

这是我的index.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]
        });

    }
});

Answer 1

查看http://maps.google.com/maps/api/js?sensor=true，您会看到它会动态地将脚本加载到您的页面中。从理论上讲，您还必须缓存所有这些脚本URL。

但是，无法离线使用交互式地图。它将在用户交互期间动态加载资源。如果您的应用程序处于脱机状态，则无法使用此功能。

缓存谷歌地图与HTML5 for iphone离线使用错误

1 个答案: