问题
I'm experimenting with sancha js lib, and buidling an offline iphone4 app.
iPhone (iOS 4) is reporting the error when accessing it within iphone safari: TypeError:Result of expression 'google.maps.LatLng' [undefined] is not a constructor
Here is my index.html file:
<!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>
Manifest:
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]
});
}
});
回答1:
Look into http://maps.google.com/maps/api/js?sensor=true and you will see that it loads scripts dynamically into your page. Theoretically, You have to cache all those script URLs, too.
However, there's no way to make a interactive map available offline. It will keep loading resource dynamically during the user interaction. This won't work if your application is offline.
来源：https://stackoverflow.com/questions/5001303/cache-google-map-with-html5-for-iphone-offline-use-error