HTML5获取当前位置信息-小罗同学

项目中经常用到要获取当前位置信息，于是整理了下文档

前端html部分

<div class="address">
<a href="javascript:;">
<p class="dingwei">
<img src="/img/homg/position.png">
</p>
<span id="city_address">
重庆市渝中区人民路232号人民路 </span>
<p class="shuaxin" id="get_map_area">
<img src="/img/homg/ren.png">
</p>
</a>
</div>

前端 get_map_area.js 文件如下

function set_map_area(city_id){

  $.getJSON('/mobile/api/set_map_area.html',{ city_id:city_id },function(rs){
    if(rs.status == 1){
        location.reload();
    }else{
        alert('切换定位信息失败');
    }
  });
}

function get_map_area(location){
   //alert(location);
  $('#get_map_area img').addClass('rotating');
   $.get('/mobile/api/get_map_area.html', { location: location },function(json){

    $('#get_map_area img').removeClass('rotating');
    
    if(json.id){

        $('#city_address').html(json.city_address);//修改当前地理位置
        if(json.id != json.city_id && confirm('检测到你当前位置为渝中区，是否切换？')){
            $('.diquxuanze .diqu').html(json.title);//修改城市名称
            set_map_area(json.id);
        }else{
          alert('定位成功，请不要频繁获取哦~~');
        }
    }else{
      alert('获取定位信息失败');
    }

   },'json');
   
}


function getLocation(){
  $('#get_map_area img').addClass('rotating');
  //alert('测试微信定位');


   //默认微信获取
  // wx.getLocation({
  //   type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
  //   success: function (res) {
  //       var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
  //       var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
  //       var speed = res.speed; // 速度，以米/每秒计
  //       var accuracy = res.accuracy; // 位置精度

       
  //       var location = latitude+','+longitude; //组装
  //       get_map_area(location);
  //   }
  // });

  get_html5_gps();//html5 获取



}


//html5 获取GPS 
function get_html5_gps(){

   var options={
       enableHighAccuracy:true, 
       maximumAge:1000
   }
   if(navigator.geolocation){
       //浏览器支持geolocation
       navigator.geolocation.getCurrentPosition(onSuccess,onError,options);
   }else{
       //浏览器不支持geolocation
       alert('您的浏览器不支持');
   }

}

//html5 获取GPS 成功时 
function onSuccess(position){
   //经度 //纬度
   var long =position.coords.longitude;
   var lat = position.coords.latitude;
   var location = lat+','+long;
   get_map_area(location);
   
}


//html5 获取GPS 失败时
function onError(error){

    $.getJSON('/mobile/api/get_ip_area.html',function(rs){
      if(rs.status == 1){
        get_map_area(rs.location);
      }else{
        $('#get_map_area img').removeClass('rotating');
      }
    });
  
   switch(error.code){
       case 1:
       alert("GPS位置服务被拒绝");
       break;

       case 2:
       alert("GPS暂时获取不到位置信息");
       break;

       case 3:
       alert("GPS获取信息超时");
       break;

       case 4:
        alert("GPS未知错误");
       break;
   }

}

后端PHP部分 api.php

public function set_map_area(){

   $city_new_id = I('city_id');//cookie('city_new_id');
   if(is_numeric($city_new_id)){
        cookie('city_id',intval($city_new_id));
        $this->success('设置成功');
   }else{
        $this->error('设置失败'.$rs);
   }


}


public function get_map_area(){

    if(!$location = I('location')){
        $location = cookie('location');
    }

    //初始化 默认全城
    if(!cookie('city_id')){
        cookie('city_id','0');
    }


    $key = '4WNBZ-M3CRP-ETZDU-LVM75-ABUEE-AMBL3';
    $url = 'http://apis.map.qq.com/ws/geocoder/v1/?location='.$location.'&key='.$key;
    $data = file_get_contents($url);
    $data = json_decode($data,true);

    //当前区域与地址
    $city_name = $data['result']['address_component']['district'];//区域名称
    $city_address = $data['result']['address'];//当前地址


    $map = array();
    $map['title|keywords'] = array('like','%'.$city_name.'%');
    $city = M('mall_city')->cache(true,60)->where($map)->find();

    //没查到 区域 默认返回全城
    if(!$city){
        $city['id'] = 0;
        $city['title'] = '全城';
    }

    $city['city_id'] = cookie('city_id');
    $city['city_address'] = $city_address;//默认待改

    cookie('city_new_id',$city['id']);
    cookie('city_address',$city['city_address']);

    echo json_encode($city);

}

public function get_ip_area(){
    

    $ip = get_client_ip();

    $key = '4WNBZ-M3CRP-ETZDU-LVM75-ABUEE-AMBL3';

    $url = 'http://apis.map.qq.com/ws/location/v1/ip?ip='.$ip.'&key='.$key;
    $data = file_get_contents($url);
    $data = json_decode($data,true);

    $ad_info = $data['result']['ad_info'];
    $location = $data['result']['location'];

    // cookie('province',$ad_info['province']);
    // cookie('city',$ad_info['city']);
    // cookie('location',$location['lat'].','.$location['lng']);

    if($location){
        $msg = array();
        $msg['status'] = 1;
        $msg['info'] = '获取成功';
        $msg['ip'] = $ip;
        $msg['location'] = $location['lat'].','.$location['lng'];
        $this->ajaxReturn($msg);
    }else{
        $this->error('获取失败');
    }

}

未经允许不得转载：小罗同学 » HTML5获取当前位置信息

相关推荐