首页 > 代码库 > Html5 Geolocation获取地理位置信息(转)

Html5 Geolocation获取地理位置信息(转)

2024-07-24 12:35:57   213人阅读

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="http://www.mamicode.com/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 = http://www.mamicode.com/xyUrl;"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 })();

Html5 Geolocation获取地理位置信息(转)


联系
我们