h5地理定位

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/gh1205/article/details/51850673

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){
    //详情信息
}

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

展开阅读全文

没有更多推荐了,返回首页