time 
设为首页】【收藏本站
当前位置: 主页 > WEB教程 > Html教程 > Html5通过Geolocation API获取地理位置信息的实现方法

Html5通过Geolocation API获取地理位置信息的实现方法

时间:2012-11-10 23:34 点击:2834次 字体:[ ]




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

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

如下Demo演示了通过Geolocation获取地理位置信息,并在百度地图上显示当前位置(通过调用百度地图API)。实验结果发现位置被定位到了大学城中心医院,与本人所在位置(华工学生宿舍)偏差还是有点大的,达到200-300米左右。

Html5通过Geolocation API获取地理位置信息的实现方法_www.fengfly.com

代码如下所示(其中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="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 = 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.  })(); 

 



本文地址 : http://www.fengfly.com/plus/view-210155-1.html
标签: HTML5 Geolocation API
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: