使用html5获取客户端的精确经纬度坐标位置,开发lbs服务

时间：2016-04-02 16:07:44

分类：优秀文章

我们在开发过程中有时会需要获取客户端的所在位置，例如现在流行的o2o平台，展现店铺列表等，获取位置后可以推荐相应的附近商家，这个尤为重要。

由于这些需求大多用在移动端，而移动端浏览器对html5特性支持都非常好，这里我们使用html5来实现这个功能，下面听cms大学小编细细道来。

我们直接给出演示代码：

 

折叠XML/HTML 代码
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8" />  
  5. <title>CMS大学利用html5获取经纬度</title>  
  6. </head>  
  7.   
  8. <body>  
  9. <span id="support">将下面的经纬度输入谷歌地图：</span>  
  10. <div id="show">  
  11. 纬度：<span id="latitude"></span><br />  
  12. 经度：<span id="longitude"></span><br />  
  13. 准确度：<span id="accuracy"></span>  
  14. </div>  
  15. <script type="text/javascript">  
  16. var doc = document,  
  17.     latitude = doc.getElementById('latitude'),  
  18.     longitude = doc.getElementById('longitude'),  
  19.     accuracy = doc.getElementById('accuracy'),  
  20.     support = doc.getElementById('support'),  
  21.     showDiv = doc.getElementById('show');  
  22. function lodeSupport(){  
  23.     if(navigator.geolocation){  
  24.         support.innerHTML = '将下面的经纬度输入谷歌地图(纬度 经度)查看自己位置：';  
  25.         showDiv.style.display = 'block';  
  26.         navigator.geolocation.getCurrentPosition(updataPosition);  
  27.     }else{  
  28.         support.innerHTML = '对不起，浏览器不支持！';  
  29.         showDiv.style.display = 'none';  
  30.     }  
  31. }  
  32. function updataPosition(position){  
  33.     var latitudeP = position.coords.latitude,  
  34.         longitudeP = position.coords.longitude,  
  35.         accuracyP = position.coords.accuracy;  
  36.     latitude.innerHTML = latitudeP;  
  37.     longitude.innerHTML = longitudeP;  
  38.     accuracy.innerHTML = accuracyP;  
  39. }  
  40. window.addEventListener('load', lodeSupport , true);  
  41. </script>  
  42. </body>  
  43. </html>  

代码很少，还是html5用起来简单快捷，接下来我们可以将取到的经纬度用于后续开发。

IE下的获取效果演示：

html5获取经纬度效果.jpg

pc端其他浏览器，如chrome、firefox等无法获取（这个受操作系统、防火墙、使用时间等因素影响），手机端获取正常，而且定位精度非常完美。

我们可以用获得的数据开发百度lbs云检索、行业门户特定信息推送等。

分享

相关文章

相关推荐

为帝国CMS用户提供动力

Copyright © 2016 CmsDX.com All Rights Reserved.