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

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