- 浏览: 7853381 次
- 性别:
- 来自: 广州
文章分类
- 全部博客 (2425)
- 软件工程 (75)
- JAVA相关 (662)
- ajax/web相关 (351)
- 数据库相关/oracle (218)
- PHP (147)
- UNIX/LINUX/FREEBSD/solaris (118)
- 音乐探讨 (1)
- 闲话 (11)
- 网络安全等 (21)
- .NET (153)
- ROR和GOG (10)
- [网站分类]4.其他技术区 (181)
- 算法等 (7)
- [随笔分类]SOA (8)
- 收藏区 (71)
- 金融证券 (4)
- [网站分类]5.企业信息化 (3)
- c&c++学习 (1)
- 读书区 (11)
- 其它 (10)
- 收藏夹 (1)
- 设计模式 (1)
- FLEX (14)
- Android (98)
- 软件工程心理学系列 (4)
- HTML5 (6)
- C/C++ (0)
- 数据结构 (0)
- 书评 (3)
- python (17)
- NOSQL (10)
- MYSQL (85)
- java之各类测试 (18)
- nodejs (1)
- JAVA (1)
- neo4j (3)
- VUE (4)
- docker相关 (1)
最新评论
-
xiaobadi:
jacky~~~~~~~~~
推荐两个不错的mybatis GUI生成工具 -
masuweng:
(转)JAVA获得机器码的实现 -
albert0707:
有些扩展名为null
java 7中可以判断文件的contenttype了 -
albert0707:
非常感谢!!!!!!!!!
java 7中可以判断文件的contenttype了 -
zhangle:
https://zhuban.me竹板共享 - 高效便捷的文档 ...
一个不错的网络白板工具
HTML 5提供了地理位置等一系列API可以给用户使用,方便用户制作LBS的地理应用,首先在支持HTML 5的浏览器中,当开启API时,会询问是否用户同意使用api,否则不会开启的,保证安全。
1) 开启,判断是否浏览器支持LBS api
上面的例子中,还在displayError方法中,捕捉了异常;
2 获得用户的地理位置:
这个使用getCurrentPosition就可以了;
当获得地理位置成功后,会产生一个回调方法了,处理返回的结果,
3)
一个很常见的问题,是如何跟踪用户不断变化的地理位置,这里小结下其中用到的两个api。
1 watchPosition
例子如下:
然后在successCallback中,就可以设置显示最新的地理位置:
如果不希望实时跟踪,则可以取消之:
function clearWatch(watchID) {
window.navigator.geolocation.clearWatch(watchID);
}
4) 如何处理异常:
当遇到异常时,可以捕捉之:
5) 在google 地图上显示位置(前提是有google map api等设置好)
1) 开启,判断是否浏览器支持LBS api
function isGeolocationAPIAvailable() { var location = "No, Geolocation is not supported by this browser."; if (window.navigator.geolocation) { location = "Yes, Geolocation is supported by this browser."; } alert(location); }
上面的例子中,还在displayError方法中,捕捉了异常;
2 获得用户的地理位置:
这个使用getCurrentPosition就可以了;
function requestPosition() { if (nav == null) { nav = window.navigator; } if (nav != null) { var geoloc = nav.geolocation; if (geoloc != null) { geoloc.getCurrentPosition(successCallback); } else { alert("Geolocation API is not supported in your browser"); } } else { alert("Navigator is not found"); } }
当获得地理位置成功后,会产生一个回调方法了,处理返回的结果,
function setLocation(val, e) { document.getElementById(e).value = val; } function successCallback(position) { setLocation(position.coords.latitude, "latitude"); setLocation(position.coords.longitude, "longitude"); }
3)
一个很常见的问题,是如何跟踪用户不断变化的地理位置,这里小结下其中用到的两个api。
1 watchPosition
例子如下:
function listenForPositionUpdates() { if (nav == null) { nav = window.navigator; } if (nav != null) { var geoloc = nav.geolocation; if (geoloc != null) { watchID = geoloc.watchPosition(successCallback); } else { alert("Geolocation API is not supported in your browser"); } } else { alert("Navigator is not found"); } }
然后在successCallback中,就可以设置显示最新的地理位置:
function successCallback(position){ setText(position.coords.latitude, "latitude"); setText(position.coords.longitude, "longitude"); }
如果不希望实时跟踪,则可以取消之:
function clearWatch(watchID) {
window.navigator.geolocation.clearWatch(watchID);
}
4) 如何处理异常:
当遇到异常时,可以捕捉之:
if (geoloc != null) { geoloc.getCurrentPosition(successCallback, errorCallback); } function errorCallback(error) { var message = ""; switch (error.code) { case error.PERMISSION_DENIED: message = "This website does not have permission to use " + "the Geolocation API"; break; case error.POSITION_UNAVAILABLE: message = "The current position could not be determined."; break; case error.PERMISSION_DENIED_TIMEOUT: message = "The current position could not be determined " + "within the specified timeout period."; break; } if (message == "") { var strErrorCode = error.code.toString(); message = "The position could not be determined due to " + "an unknown error (Code: " + strErrorCode + ")."; } alert(message); }
5) 在google 地图上显示位置(前提是有google map api等设置好)
function getCurrentLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showMyPosition,showError); } else { alert("No, Geolocation API is not supported by this browser."); } } function showMyPosition(position) { var coordinates=position.coords.latitude+","+position.coords.longitude; var map_url="http://maps.googleapis.com/maps/api/staticmap?center=" +coordinates+"&zoom=14&size=300x300&sensor=false"; document.getElementById("googlemap").innerHTML="<img src='"+map_url+"' />"; } function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: alert("This website does not have permission to use the Geolocation API") break; case error.POSITION_UNAVAILABLE: alert("The current position could not be determined.") break; case error.TIMEOUT: alert("The current position could not be determined within the specified time out period.") break; case error.UNKNOWN_ERROR: alert("The position could not be determined due to an unknown error.") break; } }
发表评论
-
微信开发工具中时间问题的小坑
2018-02-07 19:07 758刚开始用微信小程序开发工具,每次运行任何应用,都报这个错误: ... -
三篇不错的介绍CSS GRID的文章
2017-12-06 09:08 481三篇不错的介绍CSS GRID的文章: http://www. ... -
双因素认证(2FA)教程
2017-11-03 09:16 1463http://www.ruanyifeng.com/blog/ ... -
es6 中的export
2017-08-20 08:00 770https://juejin.im/post/5998625f ... -
markdown中的空格
2017-08-20 07:53 1650即使手动输入空格, 也是很不推荐的方法。我推荐全角空格,切换 ... -
(转)讲真,别再使用JWT了
2017-08-17 23:21 959不错的好文: http://insights.thoughtw ... -
(转)手把手教你WebStorm+chrome实现时时调试刷新
2017-08-15 10:50 2976参考: http://jingyan.baidu.com/ar ... -
IntelliJ Idea 2017 免费激活方法
2017-08-15 09:38 92631. 到网站 http://idea.lanyus.com/ ... -
前端框架这么多,该何去何从?
2017-08-04 07:17 599http://insights.thoughtworkers. ... -
记录一个HTML 5画拓扑图的商业公司
2017-07-18 19:56 810http://qunee.com/ DEMO:http:// ... -
vue 2例子学习收集
2017-07-16 11:46 9531 vue2.0手撸闲鱼App https://githu ... -
(收藏)虚拟DOM内部是如何工作的
2017-07-13 22:08 549虚拟DOM内部是如何工作的 https://segmentfa ... -
最近看到的几篇精彩JAVASCRIPT博客文章推荐
2017-07-11 07:10 522【深度长文】JavaScript数组所有API全解密 http ... -
jsonp 跨域原理:深入浅出 jsonp
2017-07-10 19:55 1385https://lzw.me/a/jsonp.html jso ... -
(转)深度长文-JavaScript数组所有API全解密
2017-07-08 19:59 777深度长文-JavaScript数组所有API全解密 http: ... -
(收藏)网页导出PDF的方案
2017-07-06 07:13 909(收藏)网页导出PDF的方案 https://yiqiwuli ... -
Chromium 新的弹窗机制以及 HTML 的 <dialog> 元素
2017-06-28 12:37 1111https://juejin.im/post/59525195 ... -
国内一个不错的大屏UI设计厂家
2017-06-03 19:43 3122http://www.lanlanwork.com/dp.ph ... -
canvas仿芝麻信用分仪表盘
2017-05-28 20:21 1523canvas仿芝麻信用分仪表盘 https://segment ... -
(转)CSS 变量教程
2017-05-10 21:12 525http://www.ruanyifeng.com/blog/ ...
相关推荐
地理位置定位的几种方式:IP地址,GPS,Wifi,GSM/CDMA 地理位置获取流程: 1、用户打开需要获取地理位置的web应用。 2、应用向浏览器请求地理位置,浏览器弹出询问,询问用户是否共享地理位置。 3、假设用户允许,...
从第2 章起,分别围绕构建令人神往的富web 应用,逐一讨论了html5 的canvas、geolocation 、communication、websocket、forms、web workers、storage 等api 的使用, 辅以直观明了的客户端和服务器端示例代码,让...
由于上传文件大小限制,只能分为5部分上传,其余部分请在我的资源中找到,下载后共同解压 内容简介 今天,大多数现代浏览器都已经支持HTML5。学习体验HTML5带给Web开发的便捷、快速和强大功能,是每一位Web设计和...
由于上传文件大小限制,只能分为5部分上传,其余部分请在我的资源中找到,下载后共同解压 内容简介 今天,大多数现代浏览器都已经支持HTML5。学习体验HTML5带给Web开发的便捷、快速和强大功能,是每一位Web设计和...
由于上传文件大小限制,只能分为5部分上传,其余部分请在我的资源中找到,下载后共同解压 内容简介 今天,大多数现代浏览器都已经支持HTML5。学习体验HTML5带给Web开发的便捷、快速和强大功能,是每一位Web设计和...
《深入HTML5编程(第 2版)》首先介绍了HTML5的历史背景、新的语义标签及与以往HTML版本相比的根本变化,同时揭示了HTML5背后的设计原理。本书在上一版的基础上新增了SVG和拖放API相关内容,并对部分... 13.3 小结 275
由于上传文件大小限制,只能分为5部分上传,其余部分请在我的资源中找到,下载后共同解压 内容简介 今天,大多数现代浏览器都已经支持HTML5。学习体验HTML5带给Web开发的便捷、快速和强大功能,是每一位Web设计...
由于上传文件大小限制,只能分为5部分上传,其余部分请在我的资源中找到,下载后共同解压 内容简介 今天,大多数现代浏览器都已经支持HTML5。学习体验HTML5带给Web开发的便捷、快速和强大功能,是每一位Web设计和...
由于上传文件大小限制,只能分为5部分上传,其余部分请在我的资源中找到,下载后共同解压 内容简介 今天,大多数现代浏览器都已经支持HTML5。学习体验HTML5带给Web开发的便捷、快速和强大功能,是每一位Web设计...
由于上传文件大小限制,只能分为5部分上传,其余部分请在我的资源中找到,下载后共同解压 内容简介 今天,大多数现代浏览器都已经支持HTML5。学习体验HTML5带给Web开发的便捷、快速和强大功能,是每一位Web设计...
由于上传文件大小限制,只能分为5部分上传,其余部分请在我的资源中找到,下载后共同解压 内容简介 今天,大多数现代浏览器都已经支持HTML5。学习体验HTML5带给Web开发的便捷、快速和强大功能,是每一位Web设计...
由于上传文件大小限制,只能分为5部分上传,其余部分请在我的资源中找到,下载后共同解压 内容简介 今天,大多数现代浏览器都已经支持HTML5。学习体验HTML5带给Web开发的便捷、快速和强大功能,是每一位Web设计...
第15章 HTML 5中的文件与拖放 280 视频讲解:40分钟 15.1 选择文件 281 15.1.1 通过file对象选择文件 281 15.1.2 使用blob接口获取文件的类型与大小 282 15.1.3 通过类型过滤选择的文件 283 15.2 ...
2.4 本章小结 15 第三章 跨域交互缓存处理设计 17 3.1 跨域交互缓存处理需求 17 3.1.1 缓存技术WebStorage 17 3.1.2 跨域交互缓存处理需求 17 3.1.3 页面回退管理需求 17 3.2 缓存处理机制 18 3.2.1 跨域缓存处理 18...
7.9 ecmascript 5中的数组方法 156 7.10 数组类型 160 7.11 类数组对象 161 7.12 作为数组的字符串 163 第8章 函数 165 8.1 函数定义 166 8.2 函数调用 168 8.3 函数的实参和形参 173 8.4 作为值的函数 178 8.5 作为...
7.9 ECMAScript 5中的数组方法 7.10 数组类型 7.11 类数组对象 7.12 作为数组的字符串 第8章 函数 8.1 函数定义 8.2 函数调用 8.3 函数的实参和形参 8.4 作为值的函数 8.5 作为命名空间的函数 8.6 闭包 8.7 函数属性...
7.9 ECMAScript 5中的数组方法 7.10 数组类型 7.11 类数组对象 7.12 作为数组的字符串 第8章 函数 8.1 函数定义 8.2 函数调用 8.3 函数的实参和形参 8.4 作为值的函数 8.5 作为命名空间的函数 8.6 闭包 8.7 函数属性...