HTML5开发移动web应用——Sencha Touch篇(12)
Posted fareise
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HTML5开发移动web应用——Sencha Touch篇(12)相关的知识,希望对你有一定的参考价值。
Sencha Touch同样可以使用地图、多媒体等插件。
1、Map组件
我们通过Ext.Map定义Map组件,其xtype为map。除了使用该插件外,还要调用Google的地图API所使用的js文件,代码如下:
<script src=”https://maps.google.com/maps/api/js?sensor=true”></script>
引入该文件后,我们就可以编写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实现同样的功能。代码如下:
<pre name="code" class="javascript">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:设置循环次数
以上是关于HTML5开发移动web应用——Sencha Touch篇(12)的主要内容,如果未能解决你的问题,请参考以下文章
HTML5开发移动web应用——Sencha Touch篇(12)
HTML5开发移动web应用——Sencha Touch篇(10)