Html5 Geolocation获取地理位置信息(转)
Html5中提供了地理位置信息的API，通过浏览器来获取用户当前位置。基于此特性可以开发基于位置的服务应用。在获取地理位置信息前，首先浏览器都会向用户询问是否愿意共享其位置信息，待用户同意后才能使用。
Html5获取地理位置信息是通过Geolocation API提供，使用其getCurrentPosition方法，此方法中有三个参数，分别是成功获取到地理位置信息时所执行的回调函数，失败时所执行的回调函数和可选属性配置项。
如下Demo演示了通过Geolocation获取地理位置信息，并在百度地图上显示当前位置（通过调用百度地图API）。实验结果发现位置被定位到了大学城内环东四路入口处，与本人所在位置（华工学生宿舍）偏差还是有点大的，达到200-300米左右。
代码如下所示（其中convertor.js为百度地图提供的坐标转化文件）：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>H5地理位置Demo</title>
5 <script src="http://api.map.baidu.com/api?v=1.3" type="text/javascript">
6 </script>
7 <script type="text/javascript" src="convertor.js">
8 </script>
9 </head>
10 <body>
11 <div id="map" style="width:600px; height:400px">
12 </div>
13 </body>
14 <script type="text/javascript">
15 if (window.navigator.geolocation) {
16 var options = {
17 enableHighAccuracy: true,
18 };
19 window.navigator.geolocation.getCurrentPosition(handleSuccess, handleError, options);
20 } else {
21 alert("浏览器不支持html5来获取地理位置信息");
22 }
23
24 function handleSuccess(position){
25 // 获取到当前位置经纬度 本例中是chrome浏览器取到的是google地图中的经纬度
26 var lng = position.coords.longitude;
27 var lat = position.coords.latitude;
28 // 调用百度地图api显示
29 var map = new BMap.Map("map");
30 var ggPoint = new BMap.Point(lng, lat);
31 // 将google地图中的经纬度转化为百度地图的经纬度
32 BMap.Convertor.translate(ggPoint, 2, function(point){
33 var marker = new BMap.Marker(point);
34 map.addOverlay(marker);
35 map.centerAndZoom(point, 15);
36 });
37 }
38
39 function handleError(error){
40
41 }
42 </script>
43 </html>
convertor.js文件：
1 (function() { // 闭包
2 function load_script(xyUrl, callback) {
3 var head = document.getElementsByTagName('head')[0];
4 var script = document.createElement('script');
5 script.type = 'text/javascript';
6 script.src = xyUrl;
7 // 借鉴了jQuery的script跨域方法
8 script.onload = script.onreadystatechange = function() {
9 if ((!this.readyState || this.readyState === "loaded" || this.readyState === "complete")) {
10 callback && callback();
11 // Handle memory leak in IE
12 script.onload = script.onreadystatechange = null;
13 if (head && script.parentNode) {
14 head.removeChild(script);
15 }
16 }
17 };
18 // Use insertBefore instead of appendChild to circumvent an IE6 bug.
19 head.insertBefore(script, head.firstChild);
20 }
21 function translate(point, type, callback) {
22 var callbackName = 'cbk_' + Math.round(Math.random() * 10000); // 随机函数名
23 var xyUrl = "http://api.map.baidu.com/ag/coord/convert?from=" + type
24 + "&to=4&x=" + point.lng + "&y=" + point.lat
25 + "&callback=BMap.Convertor." + callbackName;
26 // 动态创建script标签
27 load_script(xyUrl);
28 BMap.Convertor[callbackName] = function(xyResult) {
29 delete BMap.Convertor[callbackName]; // 调用完需要删除改函数
30 var point = new BMap.Point(xyResult.x, xyResult.y);
31 callback && callback(point);
32 }
33 }
34
35 window.BMap = window.BMap || {};
36 BMap.Convertor = {};
37 BMap.Convertor.translate = translate;
38 })();
Html5 Geolocation获取地理位置信息(转)的更多相关文章
- Html5 Geolocation获取地理位置信息
Html5中提供了地理位置信息的API,通过浏览器来获取用户当前位置.基于此特性可以开发基于位置的服务应用.在获取地理位置信息前,首先浏览器都会向用户询问是否愿意共享其位置信息,待用户同意后才能使用. ...
- AngularJS进阶(二十)HTML5实现获取地理位置信息并定位功能
HTML5实现获取地理位置信息并定位功能 注:请点击此处进行充电! 前言 这篇文章主要介绍了HTML5实现获取地理位置信息并定位功能,本文讲解了原生HTML5.百度地图.谷歌地图等三种获取理位置信息并 ...
- html5实现获取地理位置信息并定位
这里主要讲h5实现获取地理位置信息并定位功能,本文讲解了原生h5,百度地图,谷歌地图等三种获取地理信息并定位的方法,需要的朋友可以参考下: h5提供了地理位置功能(Geolocation API),能 ...
- HTML5实现获取地理位置信息并定位功能
HTML5提供了地理位置定位功能(Geolocation API),能确定用户位置,我们可以借助HTML5的该特性开发基于地理位置信息的应用.本文结合实例给大家分享如何使用HTML5,借助百度.谷歌地 ...
- html5获取地理位置信息API
html5获取地理位置信息API 在HTML5中,可以看下如何使用Geolocation API来获得用户的地理位置信息,如果该浏览器支持的话,且设备具有定位功能,就能够直接使用这组API来获取当前位 ...
- HTML5 获取地理位置信息
HTML5增加的新功能,获取地理位置信息,如果浏览器支持且设备有定位功能,就能够直接使用这组API来获取当前信息位置.该Geolocation API可以应用于移动设备中的地理位置. Geolocat ...
- html5代码,获取地理位置
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta htt ...
- PhoneGap Geolocation 获取地理位置 api
一. PhoneGap Geolocation 对象介绍 1.使应用程序可以访问地理位置信息.geolocation 对象提供了对设备 GPS 传感器的访问.Geolocation 提供设备的位置信息 ...
- 百度api:根据经纬度获取地理位置信息
调用百度api,根据经度和纬度获取地理位置信息,返回Json. C#代码: using Newtonsoft.Json; using Newtonsoft.Json.Linq; using Syste ...
随机推荐
- xp局域网共享设置
xp在局域网内的每一台机子做以下一些设置:1.启用Guest(来宾)帐户:控制面板--用户帐户或者在管理工具--计算机管理--本地用户和组--右键Guest属性--去掉帐户已停用 前的勾.2.允许Gu ...
- Linked List Cycle leetcode II java （寻找链表环的入口）
题目: Given a linked list, return the node where the cycle begins. If there is no cycle, return null. ...
- Linux Shell处理文本最常用的工具大盘点
导读 本文将介绍Linux下使用Shell处理文本时最常用的工具:find.grep.xargs.sort.uniq.tr.cut.paste.wc.sed.awk:提供的例子和参数都是最常用和最为实 ...
- 如何配置Ubuntu 16.04 GRUB 2引导加载程序
正如你所知,GRUB 2 是大多数 Linux 操作系统的默认引导加载程序.GRUB 是 GRand Unified Bootloader 的缩写,它是 Linux 启动时首先要加载的一个程序,此后它 ...
- linux用户管理中两个重要的“父子”配置文件
在Linux中主要通过用户配置文件来查看和修改用户信息,因此下面我们将介绍两个重要的用户配置文件,让你能够更好的hold住你的用户. 一:父文件/etc/passwd 1.查看配置文件/etc/pas ...
- JavaScript高级程序设计（第3版）学习笔记·第8章——浏览器对象模型BOM
转自:http://www.shaoqun.com/a/43768.aspx 访问和操作浏览器窗口的模型称为浏览器对象模型BOM(Browser Object Model),但习惯上是把所有针对浏览器 ...
- IMA文件如何打开，winimage使用方
一般先用UltraISO打开一个系统的镜像文件(.iso).其中有些文件(尤其是.ima,img)比如下面雨林木风Ghost系统盘的这个IMA文件,我们先提取到桌面 用WinImage打开这个文件即可 ...
- 使用Editplus配置PHP调试环境
工欲善其事必先利其器.近期看了非常多PHP的IDE介绍.最后选择了Editplus.以下说说一些PHP的调试环境配置问题. 1. 加入PHP模板 第一步 新建->其他->php 第二步 输 ...
- Android 之 AndroidManifest.xml 详解（二）
[10]<activity> Activity活动组件(即界面控制器组件)的声明标签,Android应用中的每一个Activity都必须在AndroidManifest.xml配置文件中声 ...
- 腾讯云兑现存储获取临时授权C#版
腾讯官方没有提供C#版的,没办法自己根据java版改写了一个,这里面的坑花了我20多个小时,所以记录下 <%@ WebHandler Language="C#" Class= ...