你的位置:首页 > 网页设计

[网页设计]Html5 Geolocation获取地理位置信息


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

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

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

<!DOCTYPE html><html><head>  <meta charset="utf-8"/>  <title>H5地理位置Demo</title>  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">  <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=dGg7NKEkMCp8j1pWHCHZ3nhk"></script>  <script type="text/javascript" src="js/convertor.js"></script>  <style>    html,body,#map{width:100%;height:100%;padding:0;margin:0;}  </style></head><body> <div id="map"></div> <script type="text/javascript">  if (window.navigator.geolocation) {    var options = {      enableHighAccuracy: true,    };    window.navigator.geolocation.getCurrentPosition(handleSuccess, handleError, options);  } else {    alert("浏览器不支持html5来获取地理位置信息");  }    function handleSuccess(position){    // 获取到当前位置经纬度 本例中是chrome浏览器取到的是google地图中的经纬度    var lng = position.coords.longitude;    var lat = position.coords.latitude;    // 调用百度地图api显示    var map = new BMap.Map("map");    var ggPoint = new BMap.Point(lng, lat);    // 将google地图中的经纬度转化为百度地图的经纬度    BMap.Convertor.translate(ggPoint, 0, function(point){      var marker = new BMap.Marker(point);      map.addOverlay(marker);      map.centerAndZoom(point, 15);    });  }    function handleError(error){    alert('error');  }</script></body></html>

在手机上实现的效果如下:

 

其中BMap.Convertor.translate(gpsPoint,0,translateCallback);     //真实经纬度转成百度坐标

其中gpsPoint var gpsPoint = new BMap.Point(经度,纬度);

( GPS坐标)  0:代表GPS;也可以是2:google坐标 ;  translateCallback:回掉函数

 

convertor.js文件:

(function() { // 闭包  function load_script(xyUrl, callback) {    var head = document.getElementsByTagName('head')[0];    var script = document.createElement('script');    script.type = 'text/javascript';    script.src = xyUrl;    // 借鉴了jQuery的script跨域方法    script.onload = script.onreadystatechange = function() {      if ((!this.readyState || this.readyState === "loaded" || this.readyState === "complete")) {        callback && callback();        // Handle memory leak in IE        script.onload = script.onreadystatechange = null;        if (head && script.parentNode) {          head.removeChild(script);        }      }    };    // Use insertBefore instead of appendChild to circumvent an IE6 bug.    head.insertBefore(script, head.firstChild);  }  function translate(point, type, callback) {    var callbackName = 'cbk_' + Math.round(Math.random() * 10000); // 随机函数名    var xyUrl = "http://api.map.baidu.com/ag/coord/convert?from=" + type        + "&to=4&x=" + point.lng + "&y=" + point.lat        + "&callback=BMap.Convertor." + callbackName;    // 动态创建script标签    load_script(xyUrl);    BMap.Convertor[callbackName] = function(xyResult) {      delete BMap.Convertor[callbackName]; // 调用完需要删除改函数      var point = new BMap.Point(xyResult.x, xyResult.y);      callback && callback(point);    }  }  window.BMap = window.BMap || {};  BMap.Convertor = {};  BMap.Convertor.translate = translate;})();

 

 百度采用何种坐标体系?

百度地图api中采用两种坐标体系,经纬度坐标系和墨卡托投影坐标系。前者单位是度,后者单位是米,具体定义可以参见百科词条解释: 

  http://baike.baidu.com/view/61394.htm和http://baike.baidu.com/view/301981.htm。

百度坐标为何有偏移?

国际经纬度坐标标准为WGS-84,国内必须至少使用国测局制定的GCJ-02,对地理位置进行首次加密。百度坐标在此基础上,进行了BD-09二次加密措施,更加保护了个人隐私。百度对外接口的坐标系并不是GPS采集的真实经纬度,需要通过坐标转换接口进行转换。

 

w3school演示地址:http://www.w3school.com.cn/tiy/t.asp?f=html5_geolocation_error

 

作者:风雨后见彩虹

出处:http://www.cnblogs.com/moqiutao/

如果您觉得本文对您的学习有所帮助,请多支持与鼓励。