码迷,mamicode.com
首页 > Web开发 > 详细

html5获取地理位置和定位

时间:2019-05-08 19:04:05      阅读:165      评论:0      收藏:0      [点我收藏+]

标签:==   功能   error   span   orm   .com   成功   row   显示   

1.H5地理位置定位功能

首先判断用户浏览器是否支持该功能,目前大多数现代浏览器均支持,获取位置信息需用户授权同意

 

function getLocation(){ 
  if (navigator.geolocation){ 
    navigator.geolocation.getCurrentPosition(showPosition,showError); 
  }else{ 
    alert("浏览器不支持地理定位。"); 
  } 
} 

 

2.showPosition()获取用户经度纬度

 

function showPosition(position){
   console.log(position); 
   var lat = position.coords.latitude; //纬度 
   var lag = position.coords.longitude; //经度 
   console.log(‘纬度:‘+lat+‘,经度:‘+lag); 
} 

 

3.执行函数getLocation(),如果调用成功即可显示经度纬度,简单吧!!!

4.补充showError(),这个函数是报错信息

showError(error){

  console.log(error.code)

}

 

function showError(error){ 
  switch(error.code) { 
    case error.PERMISSION_DENIED: 
      alert("定位失败,用户拒绝请求地理定位"); 
      break; 
    case error.POSITION_UNAVAILABLE: 
      alert("定位失败,位置信息是不可用"); 
      break; 
    case error.TIMEOUT: 
      alert("定位失败,请求获取用户位置超时"); 
      break; 
    case error.UNKNOWN_ERROR: 
      alert("定位失败,定位系统失效"); 
      break; 
  } 
} 

 

接下来用百度和谷歌提供的接口,利用获取到的经纬度查看具体的地址信息

用到了jq的ajax封装,所以得引用jq,

 

百度的:

 

function showPosition(position){ 
   //将我们获取到的经纬度保存到变量中
  var latlon = position.coords.latitude+‘,‘+position.coords.longitude; 
 
  //baidu接口
  var url = "http://api.map.baidu.com/geocoder/v2/?ak=C93b5178d7a8ebdb830b9b557abce78b&callback=renderReverse&location="+latlon+"&output=json&pois=0" 
  $.ajax({ 
    type: "GET", 
    dataType: "jsonp", 
    url: url, 
    beforeSend: function(){ 
      $("#baidu").html(‘正在定位...‘); 
    }, 
    success: function (data) { 
      if(data.status==0){ 
         $("#baidu").html(data.result.formatted_address); 
       } 
     }, 
     error: function (XMLHttpRequest, textStatus, errorThrown) { 
       $("#baidu").html(latlon+"地址位置获取失败"); 
    } 
  }); 
}); 

 

谷歌

谷歌同上,接口如下;

var  url=‘http://maps.google.cn/maps/api/geocode/json?latlng=‘+latlon+‘&language=CN‘;

成功回调:


success: function (data) { 
      if(data.status==‘OK‘){ 
      var results = data.results; 
        $.each(results,function(index,array){ 
          if(index==0){ 
            $("#google_geo").html(array[‘formatted_address‘]); 
          } 
        }); 
      } 
    }

 

html5获取地理位置和定位

标签:==   功能   error   span   orm   .com   成功   row   显示   

原文地址:https://www.cnblogs.com/cangqinglang/p/10833677.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!