HTML5获取当前位置信息

项目中经常用到要获取当前位置信息，于是整理了下文档前端html部分 <div class="address"><a href="javascript:;"><p class="dingwei"><img src="/img/homg/position.png"></img></p><span id="city_address">重庆市渝中区人民路232号人民路 </span><p class="shuaxin" id="get_map_area"><img src="/img/homg/ren.png"></img></p></a></div> 前端 get\_map\_area.js 文件如下 <pre>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; }}</pre> 后端PHP部分 api.php <pre>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('获取失败'); }}</pre>

HTML5获取当前位置信息

评论1