h5地理定位

h5地理定位

---

H5提供了地理定位（geolocation）API，可以获取用户的经纬度信息

• 判断浏览器是否支持地理定位
• 如果支持，就调用navigator.geolocation属性的getCurrentPosition方法。

该方法接受三个参数，即getCurrentPosition(successHandler, errorHandler, options)；后两个为可选参数

1.  successHandler 当浏览器成功获取到你的位置时会调用这个successHandler函数，并传入一个position对象，    该对象会有两个属性：coords和timestamp（包含创建这个position的时间）。2.   errorHandler 为错误信息处理函数。 - 这个position属性下有个coords，可以获取经纬度信息，即latitude和longitude。这样就可以拿到用户的经纬度数据。3.  options，enableHighAccuracy表示是否允许使用高精度，为true和false，     timeout: 2000,maximumAge: 2000

---

代码：

//判断浏览器支持if(window.navigator.geolocation) {      //调用getCurrentPosition方法     window.navigator.geolocation.getCurrentPosition(handleSuccess, handleError);     //注：options  为第三个参数 ，为可选参数     //var options = {enableHighAccuracy: true,timeout: 2000,maximumAge: 2000}; }else{     console.log("浏览器不支持html5来获取地理位置信息"); }function handleSuccess(position){      //经纬度      var lng = position.coords.longitude;       var lat = position.coords.latitude;       //转化成百度经纬度      //在这里操作 }function handleError(error){     var result;     switch (error.code) {          case error.PERMISSION_DENIED:               result="请打开您的定位系统";               break;          case error.POSITION_UNAVAILABLE:               result="暂时获取不到您的地点信息，请手动选择城市";               break;          case error.TIMEOUT:               result="连接超时";               break;          case error.UNKNOWN_ERROR:               result="发生了位置错误";               break;          }     }

以上是做好了获取定位信息

• 以我个人经验是直接在这里转化成百度经纬度

以下示例，是调取百度接口获取周边详细信息

代码：

translateCallback = function (data){   if(data.status === 0) {        var marker = new BMap.Marker(data.points[0]);        var s=data.points[0].lng;        var k=data.points[0].lat;        var lists={                lng:s,                lat:k,                ak:'自己的密钥'            }          console.log(lists.lng+','+lists.lat);      var JSONP=document.createElement("script");          JSONP.type="text/javascript";          JSONP.src='http://api.map.baidu.com/geocoder/v2/?ak='+lists.ak+'&callback=jsonpCallbacks&location='+lists.lat+','+lists.lng+'&output=json&pois=1';     document.getElementsByTagName("head")[0].appendChild(JSONP);          }              } setTimeout(function(){     var convertor = new BMap.Convertor();     var pointArr = [];     pointArr.push(ggPoint);     convertor.translate(pointArr, 1, 5, translateCallback); }, 1000);function jsonpCallbacks(data){    //详情信息}

• 把经纬度转换成具体城市信息。这个可以自己根据项目需要，可以自己编写一个城市经纬度范围查询库，也可以调用百度的地图API。
• 百度的Geocoding和逆Geocoding API具体参数和用法，请访问http://developer.baidu.com/map/index.php?title=webapi/guide/webservice-geocoding

如有错误地方，请留言指教，谢谢大家