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

更新时间:2020-04-01    来源:浏览器    手机版     字体:

【www.bbyears.com--浏览器】

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

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

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

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

1
 2
 3    
 4         H5地理位置Demo
 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    
10    
11        
12        
13    
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

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的范畴了。

本文来源:http://www.bbyears.com/bangongshuma/91061.html

热门标签

更多>>

本类排行