cache google map with HTML5 for iphone offline use error
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.manifestCACHE MANIFEST开发者_Python百科
# 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]
});
}
});
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.
加载中,请稍侯......
精彩评论