HTML5 Geolocation API应用:计算两地距离

找出HTML5COL学院的位置   在HTML5COL学院的前面几个章节中我们已经对HTML5 Geolocation API有了一定认识,接下来我们要对位置做些更有意思的处理;看看你与我们HTML5COL学院的办公室秘密位置相距多远。为此我们需要HTML5COL学院的坐标,而且需要知道如何计算两个坐标之间的距离。   增加一个<div>   首先,在HTML中增加一个 <div>: <!DOCTYPE html> <html> <head> <meta='keywords' content='HTML5COL学院,HTML5COL,CSS3,HTML5COL,编码社区'> </head> <body> <div id="location">… Read More

利用行动装置GPS定位寻找临近地点

早先已展示过,在网页内嵌Google地图、将地址转换为经纬度座标、在地图上显示自订地标图示等技巧,最后来个综合应用当作期末考。本次的练习题是”依使用者所在位置,找出距离最近的五个台北市消防分队”。 简单整理值得留意的技术细节: 在网页嵌入Google地图并放上自订标示点(Marker)的做法,可参考笔记-网页内嵌Google地图与地理位置模拟一文。 由市政府网站取得台北市消防分队地址,透过地理编码算出经纬度座标,可参考Google Maps API地址转换一文。而在本次范例中,我们预先将查到的经纬度数字一并写入CSV档中,不必每次重新查询。 要计算两个经纬度座标间的直线距离,Haversine公式是最常用的演算法,简单来说,就是把地球当成一个圆球,用球体表面任两点到圆心所形成的夹角,加上一堆Sin , Cos推算沿球体表面连接两点的弧线长度。依据英国学者研究指出,思考过度复杂数学公式可能会对中老年人的神经中枢有负面影响,为求养生保健,在此直接引用公式,对于数学细节就不再深究… HTML5世代的浏览器(IE要IE9+)多能支援地理资讯功能,可整合行动装置(手机、平版)的GPS取得使用者当时所在地理位置(存取前会弹出确认视窗征求使用者同意),如此我们便可依使用者所在位置提供不同资讯,例如:列出临近的商店、餐厅或服务据点…等等。要透过Javascript存取使用者的地理资讯,可使用Geolocation API。 使用者所在位置及各消防分队的经纬度都有了,便可利用Haversine公式算出各分队与目前位置的直线距离作为远近参考。(不考虑路线规划、交通状况等因素,那是导航软体或霹雳车RD该烦恼的事,为了好玩写程式没必要把自己逼上绝路XD至于有心挑战的朋友,Google Maps也有路线规划API,倒是可以参考) Javascript的Array.sort(compareFunction),提供了类似LINQ OrderBy(o => o.prop)的简便做法,让我惊喜了一下。原本以为要花点心思处理,没想到只用两行就搞定依距离远近排序的需求。 前篇文章介绍的动态文字图档权充Marker Icon派上用场,直接用分队名称告示牌当标示图,最近的前五名用鲜红底,其余用暗红底,一目了然,酷!! 程式范例如下,请享用:… Read More

利用HTML5 Canvas动态产生文字图示

前几篇Google Map API文章,一直有用到Google地图加上Marker的做法。(即下图的红色大头针图案) 不过,若全部的标示点用一样的图示,会显得无趣且容易混淆(如下图所示),虽然将滑鼠移到标示图案上方会显示名称,在使用者体验上总觉得还有改善空间。 事实上,Google Maps API在新增地标时,是可以自订图示的。MarkerOptions提供icon参数可指定图档URL,另外有shadow参点可指定阴影图档的URL,以取代预设的黑点红色大头针图示。 只是有个小问题,在消防分队位置显示范例中,台北市共有44个消防分队,即使能自订图示,可能也只是用44台消防车换掉44根大头针,对于识别度并没有太多提升,除非我们能预先制作44个刻有消防分队名称的图档,再一一对应到44个Marker使用… 身为程式魔人,44个图档用手工做是不被允许的,当然要自动产生才不会被人耻笑。我第一个想到是用ASP.NET动态产生图档的技巧,不过再转念一想,何不用HTML5的Canvas来实做,完全在Client解决? (IE6/7/8:那我们怎么办?念你们曾纵横江湖多年,也算时代英雄,你们自尽吧!) HTML5 Canvas要即时产生图档不是问题,再配合Canvas.toDataURL()就可取代图档案URL,作为MarkerOptions.icon参数的设定值,就能达到当场动态产生Marker图示的目的。 我试写了一个小函数,用Canvas作图,再用toDataURL()输出作为<img>的src来源: <!DOCTYPE html> <html> <head runat="server"> <title>動態Canvas圖標</title> <script… Read More

Google Maps API地址转换

将地址转换成地理座标的程序被称为地理编码 (Geocoding),Google Maps API亦支援地理编码服务(注意:有每天查询次数不可超过2,500次的限制,申请Google Maps API Premier可以提高到100,000次) ,呼叫方法很简单,使用URL “http: //maps.googleapis.com/maps/api/geocode/json?address=要转换的地址&sensor=ture或false”,便可得到一份JSON格式的地址座标资讯,address参数除了完整地址,也可以输入一般性地名或片段地址,另外也能指定传回XML格式、使用语系、检视范围(优先列出该范围内符合结果,最经典的例子是在台湾查询”中正路”、”中山路”之类的菜市场路名,要指定县市范围才能找对目标)…等等,完整参数说明可参见API文件。 先用浏览器来个简单测试,在网址输入http://maps.googleapis.com/maps/api/geocode/json?address=%E5%8F%B0%E5%8C%97%E5%B7%BF %E5%85%89%E5%BE%A9%E5%8D%97%E8%B7%AF100%E8%99%9F&sensor=false (地址中文部分经encodeURI()编码),会得到以下结果: { "results" : [ { "address_components" :… Read More

笔记-网页内嵌Google地图与地理位置模拟

终于有机会开始玩HTML5中行动装置GPS整合应用。 我的第一步是希望能在网页整合Google地图,即便实际需求不一定需要显示地图,但在开发测试阶段,要求开发人员直接由25.1234, 121.5678之类数字判断结果是否正确未免太不人道,因此用地图方式呈现特定经纬度资料是绝对必要的。第一个练习题就来试试在网页中显示特定经纬度的地图吧! Google地图Javascript API已经发展到了V3,整合应用起来相当方便省事,而官方的说明文件写得颇为详细(甚至有中文),要上手一点也不困难。以下便是我写的超简单的入门范例,试着在网页显示以政大校园八角亭为中心的地图。(八角亭是我每次猫空LSD的起点,经纬度数据在心跳表中唾手可得) <!DOCTYPE html>   <html> <head runat="server"> <title>內嵌Google地圖</title> <script src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.js'></script> <script src="https://maps.google.com/maps/api/js?sensor=false"></script> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />… Read More

利用HTML5中Geolocation获取地理位置在Google Map上定位

本小菜刚开始学习HTML5,现在对其中的Geolocation颇感兴趣,结合Google Map的API实现基本的地图定位功能。 1.获取当前地理位置 调用方法 void getCurrentPosition(onSuccess, onError, options);即可。 其中onSuccess是获取当前位置信息成功时执行的回调函数,onError是获取当前位置信息失败时所执行的回调函数,options是一些可选熟悉列表。其中第二和第三个参数为可选属性。 在onSuccess回调函数中,用到了参数position,代表一个具体的position对象,表示当前位置。其具有如下属性: latitude:当前地理位置的纬度。 longitude:当前地理位置的经度。 altitude:当前位置的海拔高度(不能获取时为null)。 accuracy:获取到的纬度和经度的精度(以米为单位)。 altitudeAccurancy:获取到的海拔高度的经度(以米为单位)。 heading:设备的前进方向。用面朝正被方向的顺时针旋转角度来表示(不能获取时为null)。 speed:设备的前进速度(以米/秒为单位,不能获取时为null)。 timestamp:获取地理位置信息时的时间。 在onError回调函数中,用到了error参数。其具有如下属性: code:错误代码,有如下值。… Read More

实例说明shell i/o常用重定向

每个打开的文件都会被分配一个文件描述符.stdin (键盘), stdout (屏幕), 和 stderr (错误消息输出到屏幕上)的文件描述符分别是0, 1, 和 2. 对于正在打开的额外文件, 保留了描述符3到9. 文件描述符是文件系统为了跟踪这个打开的文件而分配给它的一个数字。 下面以实例说明 1,>的用法 [zhangy@localhost ~]$ echo "11111" >… Read More

php执行linux命令的6个函数

一般情况下,很少会用php去执行linux命令,不过特殊情况下,你也许会用到这些函数。以前我知道有二个函数可以执行linux命令,一个是exec,一个是shell_exec。其实有很多的,结合手册内容,介绍以下6个函数。 1,exec函数 <?php $test = "ls /tmp/test"; //ls是linux下的查目录,文件的命令 exec($test,$array); //执行命令 print_r($array); ?> 返回结果如下: [root@krlcgcms01 shell]# php ./exec.php Array ( [0]… Read More

shell编程必须要掌握的命令,xargs

一,说xargs命令前,说一下什么是shell编程 什么是shell编程呢,说白了就是按一定的规则把各种命令组织起来,完成一定的事情。纯属个人理解,哈哈。不管是交互式的shell,还是非交互的shell,它都是由一些命令组成的。 所以命令很重要。xargs就是其中之一,并且还是相当重要的一个命令,为什么说它重要 呢,因为他和能其他命令结合使用,把一个命令的输出,当作参数传给另一个命令。这个根find命令参数中的exec很像,但是不同:以下4点在网上找的, 第一点,是亲身体验过,家里我用的是archlinux,当你通过exec传很多数据给后面的命令时,会卡在哪儿,其他的三没试过,如果有兴趣的朋友可以 自己比较一下他们速度, [zhangy@BlackGhost music]$ time find /home/zhangy/download/ -name “.gz” -print real    0m0.053s user    0m0.003s sys    0m0.003s… Read More

3种权限管理方案

浏览网站时,有的时候,会告诉你,无权进入一些页面。例如:一些技术性的论坛,刚进去的时候,只能看看贴子,并且只能在一定的区域看,不能 发贴等。做电子商务时,电子商务的后台是一个比较大的系统,不同的人进去会看到不同的页面,如果能看到同一个页面,也许允许的操作也不一样,这些机制是怎 么实现的呢。下面就个人愚见分析几种情况 一,简单session控制 实现原理和方法: 用户登录后台,输入用户名和密码,对用户的用户名和密码进行验证,验证通过后,可以把用户的一些基本信息放到session里面当用户访问后台的其他页面时,去判断一下session是否存在,并且没有过期。不过,后台管理员权限一样,没有区分 1,后台页面共用的基本类,我们可以在基本类的里加以判断,或者在基本类外面在extends一层,加以判断,去check一下session。 2,直接重写一个check_login.php每个后台页面都包涵这个页面,通过这个页面加以判断,check一下session。 二,菜单控制 实现原理和方法: 菜单控制比简单session控制要高级一点,不光判断用户是否登录,还对用户的权限进行了控制,不同的人看到不同的东西。 1,在显示菜单的地方加以判断,不同的用户显示不同的菜单。这种方法用户虽然看不到菜单,但是可以通过输入url,进入没有显示的菜单页面,前提是用户用户知道url才行。 2,建立一个用户和菜单内容的关系表,把用户所能看到的内容,放到数据库内,当要显示菜 单的地方,用数据库进行读取,如果用户是通过输入url进入的话,我们也可以根据用户和url,到关系表中进行查找,如果没有找到的话,就不准许进入,这 种方法可以避免上面一种方法的弊端了。 三,页面元素控制 上面说的菜单控制,可以设置权限到页面的级别,但是如果我有这样的需求又怎么办呢,所有 的人都可以访问一个页面,一部分可以进行添加操作,一部分人可以进行删除操作,一部分可以进行审核工作。这样的需求,菜单控制很难实现的。现在的权限管理 中好多都用的这种方式。例如:一些开源的论坛,cms系统。个人想了一个方法,觉得可以实现页面元素控制。看一下下面的图片。 解释一下:… Read More

linux git 客户端 smartgit

本机装了双系统centos6.5,在centos下装了一套开发环境,发现linux下的git图形客户端好少,能用的更少。本想装一下gitg 的,发现gitg要求的依赖包好新,centos基本上不能满足,如果非要用的话,要手动更新好多包,太麻烦。在centos下,推荐使用 smartgit。 一,下载linux版smartgit 下载地址:http://www.syntevo.com/smartgithg/download 二,安装git # yum install git 三,生成公钥和私钥 # ssh-keygen -t rsa -C "你的邮箱" [zhangying@localhost .ssh]$ pwd… Read More

linux下分卷压缩,合并解压的3种方法

我们上传东西的时候,由于文件过大而不能上传,或者不给上传,最明显的就是发邮件了,附件最大5M,有的10M。如果超过了就郁闷了。这个时候,如 果能把压缩的东西,分割开来就比较爽了,windows下面我想大家知道怎么分割,利用winrar,winzip图型化设置压缩出来的块的大小。但是在 linux下面有没有这样的方法了,linux下面有rar命令,有zip命令,windows下面这二种方式可以分割压缩,我想linux下面绝对也是 可以的。下面是我尝试过程的记录: 一,rar分卷压缩和合并解压 rar -h 我们会发现以下参数,要创建多大的卷。 v             Create volumes with size autodetection or list all volumes v<size>[k,b]  Create… Read More