launch: function() {
//--------------------------------地图鱼多媒体-----------------------------------------------
//sencha touch2.0中提供了Map组件,该组件中封装了Google地图API,因此可以直接通过该组件在页面中显示Google地图
<!--<script type="text/javascript" src="
http://maps.google.com/maps/api/js?sensor=true">-->
//在sencha touch 2.0中,通过Ext.Map类定义Map组件,该组件的xtype值为map.
//在使用map组件时要调用Google地图的API,所以在页面中引入Google地图API所使用的核心JavaScript脚本.
//首先,使用地图组件的setMapCenter()方法,将当前位置设置为地图的中心.接下来使用标记窗口来标记出该地理坐标.
var refresh=function(geo){
var mapdemo=Ext.ComponentManager.get('mapdemo');
var latlng=new google.maps.LatLng(geo.getLatitude(),geo.getLongitude());//获取纵坐标和横坐标,构成一个google.maps.LatLng对象,传递到map中
mapdemo.setMapCenter(latlng);//将当前位置设置在浏览器的中心
var infowindow = new google.maps.InfoWindow({//使用标记窗口标记出当前的地理位置
content:'当前位置'
});
marker=new google.maps.Marker({
position:latlng,
map:mapdemo.getMap()
});
infowindow.open(mapdemo.getMap(),marker);
google.maps.event.addListener(marker,'click',function(){
infowindow.open(mapdemo.getMap(),marker);
});
};
//浏览器获取地理位置失败,则显示错误信息
//有五个参数:
//geo:代表触发locationerror的Ext.util.Geolocation对象,
//bTimeout:一个布尔值,为true,代表获取地理位置信息超时,给出超时错误
//bPermissionDenied:一个布尔值,为true,表示拥护拒绝共享地理位置信息
//bLocationUnavailable:一个布尔值,为true,表示获取不到地理位置信息
//message:详细错误信息
var locationError=function(geo,bTimeout,bPermissionDenied,bLocationUnavailable,message){
if(bTimeout){//判断是否引发超时错误
Ext.Msg.alert('获取地图信息超时');
}
else{
Ext.Msg.alert('获取地图信息失败');
}
}
//使用Map组件显示一幅google地图,地图的中心点为浏览器所在设备的地理坐标,如果浏览器获取地理位置失败,则显示错误信息
var mapdemo=new Ext.Map({
id:'mapdemo',
useCurrentLocation:false,//地图的中心点不设为浏览器的中心位置
mapOptions:{//使用Map组件的mapOptions设置地图的相关参数
zoom:12,//将地图放大到12倍
mapTypeId:google.maps.MapTypeId.ROADMAP,//地图类型为ROADMAP(不使用卫星地图)
navigationControl:true,
navigationControlOptions:{
style:google.maps.NavigationControlStyle.DEFAULT
}
}
});
//在地图上方显示一份定为图标按钮,当用户单击该按钮时,使用Map组件的getGeo方法获取Ext.util.Geolocation对象,调用该对象的updateLocation()方法,重新获取浏览器所在的地理位置,并且将地图中心移动到浏览器所在手持设备的中心位置
toolbar=Ext.create('Ext.Toolbar',{
docked:'top',
items:[
{
iconMask:true,
iconCls:'locate',
handler:function(){
mapdemo.getGeo().updateLocation();//使用getGeo()方法获取Map组件Ext.util.Geolocation对象,调用该对象的updateLocation()方法,重新获取浏览器所在的地理位置
}
}
]
});
panel=Ext.create('Ext.Panel',{
layout:'fit',
items:[toolbar,mapdemo]
});
//Ext.util.Geolocation类的使用
//Ext.util.Geolocation:用来获取浏览器所在设备的地理位置,该类内部调用HTML5的Geolocation API
//当脚本程序中创建了Ext.util.Geolocation的实例对象以后,该对象立刻开始跟踪浏览器所在设备的地理位置.所获得到的地理位置信息被更新后,触发该对象的locationupdate事件.如果想禁用这个自动跟踪功能,可以将该对象的autoUpdate配置选项设置为false
var geo=Ext.create('Ext.util.Geolocation',{
autoUpdate:false,//禁止自动跟踪用户所在的地理位置
timeout:2000,//设置获取地理位置信息时的超时时间,如果超过该时间尚未获取到用户浏览器所在的地理位置,则抛出超时错误
listeners:{
locationupdate:refresh,//浏览器获取地理位置成功时触发该事件,调用refresh()方法
locationerror:locationError//浏览器获取地理位置失败时触发该事件,显示错误提示
}
});
mapdemo.setGeo(geo);
//创建了Ext.util.Geolocation实例对象后,通过调用该对象的updateLocation方法来手工获取地理位置,当获取地理位置信息失败时,触发locationerror事件.
//获取地理位置信息失败的原因:1.用户禁止浏览器共享地理位置.2.浏览器不支持html5的geolocation API
//如果autoUpdate设置为true,可以使用frequency配置选项来设置每个多久自动重新获取浏览器所在的地理位置,单位时毫秒,默认值是10000(毫秒)
//var geo=Ext.create('Ext.util.Geolocation',{
//autoUpdate:true,//禁止自动根种用户所在的地理位置
//timeout:2000,
//frequency:1800000//每隔半个小时自动重新获取地理位置
//listeners:{
//locationupdate:refresh,
//locationerror:locationError
//}
//});
geo.updateLocation();
Ext.Viewport.add(panel);
},
