HTML5开发移动web应用——Sencha Touch篇(12)

    Sencha Touch同样可以使用地图、多媒体等插件。

   1、Map组件

   我们通过Ext.Map定义Map组件，其xtype为map。除了使用该插件外，还要调用Google的地图API所使用的js文件，代码如下：

   引入该文件后，我们就可以编写js代码来显示地图了： 

Ext.require(‘Ext.Map’)
Ext.application({
//省略其他配置项...
launch:function(){
var map = Ext.create(‘Ext.Map’ ,{
useCurrentLocation:true
});
Ext.Viewport.add(map);
}
});其中useCurrentLocation方法表示显示用户所在位置。在HTML5中，我们可以用内置的方法获取一些地理位置信息，诸如经度、纬度、海拔等。在Sencha Touch中的Map组件，可以通过Ext.util.Geolocation实现同样的功能。代码如下：

var geo = Ext.create(‘Ext.util.Geolocation’,{
autoUpdate:false,
listeners:{
locationupdate:function(geo){
Ext.Msg.alert(‘地理坐标更新:’+geo.latitude);
}
}
});
 

 

 
 
 
 
   2、Video组件
 
   Video组件通过Ext.Video定义，xtype为video，代码如下：
 
 
launch:function(){
var video = Ext.create(‘Ext.Video’,{
fullScreen:true,
url:[‘text.mp4’, ’text.avi’],
loop:true,
posterUrl:’img/text.jpg’
});
Ext.Viewport.add(video);
}
    video 
中有很多可以自己进行配置的属性，包括： 
 
    width/height；
 
    url(播放视频文件的URL地址)；
 
    posterURL：视频未播放时的替代图片；
 
    loop：设置循环次数
                        

                        

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！