Html5 Geolocation获取地理位置信息教程

Html5中提供了地理位置信息的API，通过浏览器来获取用户当前位置。基于此特性可以开发基于位置的服务应用。在获取地理位置信息前，首先浏览器都会向用户询问是否愿意共享其位置信息，待用户同意后才能使用。

Html5获取地理位置信息是通过Geolocation API提供，使用其getCurrentPosition方法，此方法中有三个参数，分别是成功获取到地理位置信息时所执行的回调函数，失败时所执行的回调函数和可选属性配置项。

如下Demo演示了通过Geolocation获取地理位置信息，并在百度地图上显示当前位置（通过调用百度地图API）。

代码如下所示（其中convertor.js为百度地图提供的坐标转化文件）：

1
 2
 3    
 4        
 5        
 7        
 9    
10    
11        

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 })();

获取地理位置的方式及其优缺点：

1、ip地址
书上说不准确，很多时候获取的是ISP机房的位置，但是获取非常方便，没有什么限制。但是实际上我觉得在中国，ip地址还是比较准确的，基本上上能精确到小区或大楼的标准。
2、GPS
非常准确，但是需要在户外，且需要很长时间搜索卫星。最主要的很多设备比如笔记本电脑基本都是不带GPS的，新的智能手机倒是都有。
3、WiFi基站的mac地址。（猜测是连接位置已知的公共WiFi的时候，通过Mac地址识别WiFi接入点，从而定位)
这种定位的精度还是很不错的，而且还可以在室内定位。不过由于这种位置公开的wifi比较少，此种方法的适用范围比较少。
4、 GSM或CDMA基站
通过基站定位，精度随基站密度变化，精度一般，还是只有手机能用。看来地理位置API还是手机上比较有实用性。
5、用户指定位置
这个就不是HTML5的范畴了。