html5 geolocation配合百度地图api实现定位

时间:2023-11-17 11:37:14

1.了解html5 geolocation

HTML5 Geolocation(地理定位)用于定位用户的位置。
鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的。=> 使用时会有请求提示框,需要用户点击确认。

2.浏览器支持

Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 支持地理定位。
对于拥有 GPS 的设备,比如 iPhone,地理定位更加精确。

3.一个实例。

function position() {
//判断浏览器是否支持定位
if(navigator.geolocation) {
//这里接受两个参数 定位成功则执行第一个函数,否则执行第二个
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
alert("不支持定位");
};
};
//接受一个参数 参数为对象
function showPosition(position){
//position中有一个coords 这个下面 有latitude:纬度 longitude:经度
$.ajax({
  type: "get",
  url: "http://api.map.baidu.com/geocoder/v2/?callback=renderReverse&location=" + position.coords.latitude + "," + position.coords.longitude + "&output=json&pois=1&ak=DMCiysDe5wZUpPeTa7xZqUGnoFIUofmi",//这个ak可以去百度地图申请
  async: false,
  dataType:"jsonp",
  success: function(data) {//拿到返回的地址信息
    return data;
  }
});
}; //err
//接收一个错误参数
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;
  };
};