基于HTML5实现摇一摇定位附近农场

来源:用户上传      作者:

　　摘 要：随着我国经济的高速发展，国民经济和财政收入增速有所放缓，因此农副产品需求、农业投入量、农民工就业和工资水平的增长都将受到了一定影响，生态旅游作为广大农民增收的一种重要形式，必将在农民增收中占据重要地位，然而目前各大手机地图APP为节省宝贵的数据空间往往没有录入偏远地区的农家乐，为广大城市旅游者及农民朋友带来了困扰。HTML5技术避免了APP地图需要的巨大本地内存带来的客户体验度问题，占据的本地内存较小，充分发挥其设备适应性强的优点，并结合摇一摇的功能使整个搜索功能简单有趣。
　　关键词：HTML5；摇一摇；特性
　　一、 HTML5的优点
　　多种移动设备和pc设备的跨平台使用：HTML5的优势主要在于，通过这个技术开发出来的网站，可以进行跨平台的使用。比如基于HTML5开发了一款游戏或者是应用，开发者可以非常轻易地将其移植到Opera的游戏中心、UC的开放平台、Facebook应用平台，更甚者还可以通过编程中的封装技术放到国外的诸多平台上，比如App Store或Google Play，所以使用HTML5技术开发的应用软件的跨平台性非常强大。
　　网站中自适应网页的设计：很早之前，就有人提出了能不能“通过某种开发技术开发一个网页，普遍适用”，即让我们开发的同一张网页能够自动适应不同尺寸大小的屏幕，能够智能地根据屏幕宽度，自动调整布局（layout）。这样我们就就解决了传统中遇到的一种尴尬局面――我们设计的网站为不同的移动设备或者是PC设备需要提供不同的网页，比如需要专门提供一个安卓手机版本，或者iPhone / iPad版本。这样做虽然也能保证效果，但是比较麻烦并且开发成本高，维护难度大，而且如果一个网站有多个portal（入口），则会大大增加架构设计的复杂度和开发难度。
　　更新的及时性：应用的客户端每次都要更新，非常的繁琐，用户感知性极差。但是我们采用HTML5技术的话，更新网站应用或者游戏就好像更新页面一样，给用户的感知是即时的更新，不需要下载安装新版本。我们可以总结概述HTML5的优点如下：（1）可以改进用户的友好体验和提高可用性；（2）不需要下载视频插件，能够很好的替代FLASH和Silverlight； （3）新增的标签，将有助于开发人员重新定义重要的内容；（4）对于网站抓取和索引的时候，SEO很友好；（6）将为更多的移动应用程序和游戏提供各种想象；（7）可移植性好。
　　二、HTML5中Device Orientation特性
　　HTML5中有许多特性，例如语义特性（Class：Semantic），本地存储特性（Class： OFFLINE & STORAGE），设备兼容特性 （Class： DEVICE ACCESS），连接特性（Class： CONNECTIVITY）等等。为实现摇一摇功能，此处我们需要用到HTML5的另一特性，就是我们常常提到的Device Orientation特性。HTML5技术将底层的方向传感器和运动传感器实现代码进行了高级封装，并且还提供了DOM事件的支持。我们通过研究发现这个特性包括两个事件：第一就是 device-Orientation封装了方向传感器数据的事件，通过此事件我们可以获取手机静止状态时的方向数据信息，比如用户所持的手机所处角度、方位等。第二就是device-Motion封装了运动传感器数据的事件，通过此事件我们可以获取手机运动状态时的运动加速度等数据信息。我们使用能够很容易的实现重力感应功能、指南针功能等有趣的功能，而这些功能应用，在手机上将非常有用。其实，这项技术还能帮助我们在网页上实现一个应用于手机的、不常见却时尚的功能：手机摇一摇。这就是我们此处需要着重描述的功能应用。
　　Device Motion Event（移动设备运动事件）返回移动设备有关于加速度和旋转的相关数据信息。我们获得的加速度的数据信息将包含三个轴：x，y和z的实时信息，x轴横向贯穿平板屏幕或者手机屏幕，y轴纵向贯穿平板屏幕或者手机屏幕，z轴垂直于平板屏幕或者手机屏幕，考虑到移动设备可能没有硬件来排除重力的影响，因此该事件会返回两个属性含重力的加速度和加速度。
　　三、HTML5地理定位
　　地理位置（Geolocation）是 HTML5 的比较突出的优势之一，它提供了精确定位用户位置的功能，我们可以借助这个特性开发基于位置信息的各种助农应用。
　　1.定位用户和农场的位置
　　我们可以通过HTML5 中的Geolocation API 来获得用户和目标农场的地理位置。
　　但是考虑到该特性可能侵犯用户的隐私，因此需要得到用户同意，否则定位功能是不可用的。
　　2.多种浏览器显示支持
　　Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 如今都拥有了支持地理位置的功能。拥有 GPS 的移动设备，比如 iPhone，智能手机的地理定位将会更加精确。
　　3.HTML5 地理定位的应用
　　我们可以使用get Current Position（）方法来获得用户和农场的精确位置。
　　4.处理操作中的错误和拒绝
　　我们通过编程，使用getCurrentPosition（） 方法的第二个参数用于处理操作过程中遇到的错误。
　　5.在地图界面中的显示功能
　　如需在我们设计的地图界面中显示结果，则需要访问精确的并且可以使用经纬度的地图服务，比如百度地图。
　　至此，我们完成了利用HTML5的位置信息――纬度、经度和其他特性，来实现定位的功能。
　　四、结束语
　　对大家来说，HTML5技术而今已不再陌生，不管是趋之若鹜，热情拥抱，还是远远张望，保持距离，HTML5都是技术论坛热门的话题，给人的感觉就是酷、新、看上去很美。但是HTML5也有他的适用范围，HTML5技术是一种被夸大了的万金油，在目前浏览器支持不一，开发工具，第三方类库缺乏的情况下，HTML5无法解决一切问题，但如果限定它的使用范围，HTML5确实可以优雅的解决很多问题，HTML5实现摇一摇定位就是其中的一个。而面向未来互联网，基于“云+终端”的构架，终端的HTML5的兼容解决方案必然会出现，那时候我们就可以全面拥抱HTML5了。
转载注明来源:https://www.xzbu.com/1/view-11287422.htm