Html5中提供了地理位置信息的API,通过浏览器来获取用户当前位置。基于此特性可以开发基于位置的服务应用。在获取地理位置信息前,首先浏览器都会向用户询问是否愿意共享其位置信息,待用户同意后才能使用。
Html5获取地理位置信息是通过Geolocation API提供,使用其getCurrentPosition方法,此方法中有三个参数,分别是成功获取到地理位置信息时所执行的回调函数,失败时所执行的回调函数和可选属性配置项。
如下Demo演示了通过Geolocation获取地理位置信息,并在百度地图上显示当前位置(通过调用百度地图API)。实验结果发现位置被定位到了大学城内环东四路入口处,与本人所在位置(华工学生宿舍)偏差还是有点大的,达到200-300米左右。
代码如下所示(其中convertor.js为百度地图提供的坐标转化文件):
1 2 3 4H5地理位置Demo 5 7 9 10 111213 14 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 IE12 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=" + type24 + "&to=4&x=" + point.lng + "&y=" + point.lat25 + "&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 })();