h5页面获取定位
2018-12-11 本文已影响37人
it之承影含光
备注：页面必须在https下，并且用户选择拒绝授权，之后会一直返回用户拒绝授权，在浏览器中，只能清除位置信息
用到的服务
- h5获取定位的api navigator.geolocation.getCurrentPosition
- 新浪获取ip的接口 https://pv.sohu.com/cityjson?ie=utf-8
- 百度的地址解析
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>my-project</title>
</head>
<body>
<p id="demo">点击这个按钮，获得您的坐标：</p>
*******************************************************
<p id="demo1"></p>
<p><button onclick="getLocation()">试一下1</button></p>
*******************************************************
<p><button onclick="locationByIp()">ip定位</button></p>
<script src="https://pv.sohu.com/cityjson?ie=utf-8"></script>
<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script>
var x=document.getElementById("demo");
var x1=document.getElementById("demo1");
function getLocation(){
if (navigator.geolocation){
x1.innerHTML=JSON.stringify(navigator)
navigator.geolocation.getCurrentPosition(showPosition,showError,{
enableHighAcuracy : true,// 指示浏览器获取高精度的位置，默认为false
timeout : 5000,// 指定获取地理位置的超时时间，默认不限时，单位为毫秒
maximumAge : 2000 // 最长有效期，在重复获取地理位置时，此参数指定多久再次获取位置。
});
}else{
locationByIp();
x.innerHTML="Geolocation is not supported by this browser.";
console.log("Geolocation is not supported by this browser.");
}
}
function showPosition(position){
x.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude;
console.log("Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude);
}
// 上面的代码可以知道，如果用户设备支持地理定位，则运行 getCurrentPosition() 方法。如果getCurrentPosition()运行成功，则向参数showPosition中规定的函数返回一个coordinates对象，getCurrentPosition() 方法的第二个参数showError用于处理错误，它规定当获取用户位置失败时运行的函数。
// 我们先来看函数showError()，它规定获取用户地理位置失败时的一些错误代码处理方式：
showError=(error)=>{
locationByIp();
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;
}
};
function locationByIp() {
var localtion={};
localtion.ip = returnCitySN.cip;
// 通过百度api获得经纬度
$.getJSON("https://api.map.baidu.com/location/ip?callback=?", {
// 'ak' : 'x2CC5dtMtwjAAe6epLt2s1Kxs0BmSxPu',
'ak' : 'lApvxfMWyOB9So5CZUOupRGg7wLYlbGx',
'coor' : 'bd09ll',
'ip' : localtion.ip
}, function(data) {
localtion.province = data.content.address_detail.province;
localtion.city = data.content.address_detail.city;
localtion.district = data.content.address_detail.district;
x1.innerHTML=JSON.stringify(data.content);
});
// $.get(`http://ip.taobao.com/service/getIpInfo.php?ip=${localtion.ip}`,function(data){
// showLocation(JSON.parse(data))
// })
}
function showLocation(){
$.get(`http://gc.ditu.aliyun.com/geocoding?a=${returnCitySN.cname}`,function(res){
})
}
</script>
</body>
</html>
