如果设备没有位置信息, 谷歌浏览器,默认会从谷歌地图访问位置信息. 需要翻墙.
1
2
3
4
5
6
7
8
function sucess (e) {
console.log("sucess",e);
}
function fail (e) {
console.log("error",e);
}
window.navigator.geolocation.getCurrentPosition(sucess,fail);
1
2
3
4
// 开启监听, 当位置发生改变时,会触发. 消耗性能.
var id = window.navigator.geolocation.watchPosition(sucess,fail,options);
// 关闭监听, 需要获取 标识, id
window.navigator.geolocation.clearWatch(id);
1
2
3
4
5
6
7
8
var options = {
// 请求时间, 超时会请求失败
timeout : 1000,// 默认infinite
// 是否高精准度
enableHighAccuracy : true,// 默认 false
// 过期时效, 默认 0 有效期无限.
maximumAge : 1000
};
测试移动端 能不能用 地理位置信息 打开 wampserver 用的是猎豹免费wifi 打开了共享,
苹果手机连接上去. 结果失败, 返回的 event.code = 2 返回的 event.message = origin does not have permission to use geolocation service 很懵逼, 百度搜索找到一个# 关于web移动端定位 需要改成 https 协议,wampserver部署https服务器 这尼玛,.
安卓手机也不行. 应该还是需要翻墙.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var show1 = document.getElementById("show1");
var show2 = document.getElementById("show2");
var show3 = document.getElementById("show3");
var show4 = document.getElementById("show4");
var show5 = document.getElementById("show5");
var show6 = document.getElementById("show6");
var show7 = document.getElementById("show7");
var show8 = document.getElementById("show8");
var show9 = document.getElementById("show9");
var lasttime = 0;
window.addEventListener("devicemotion",function (e) {
console.log(e);
// 简单防抖
if (new Date().getTime() - lasttime > 1000) {
show1.innerText = "accelerationx" + e.acceleration.x;
show2.innerText = "accelerationy" + e.acceleration.y;
show3.innerText = "accelerationz" + e.acceleration.z;
show4.innerText = "accelerationIncludingGravityx" + e.accelerationIncludingGravity.x;
show5.innerText = "accelerationIncludingGravityy" + e.accelerationIncludingGravity.y;
show6.innerText = "accelerationIncludingGravityz" + e.accelerationIncludingGravity.z;
show7.innerText = "rotationRate alpha" + e.rotationRate.alpha;
show8.innerText = "rotationRate beta" + e.rotationRate.beta;
show9.innerText = "rotationRate gamma" + e.rotationRate.gamma;
lasttime = new Date().getTime();
}
},false);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
var lasttime = 0;
window.addEventListener("devicemotion", function(e) {
console.log(e);
// 简单防抖
if(new Date().getTime() - lasttime > 1000) {
// 加速度
show1.innerText = "accelerationx" + e.acceleration.x;
show2.innerText = "accelerationy" + e.acceleration.y;
show3.innerText = "accelerationz" + e.acceleration.z;
// 加速度 包含重力加速度
show4.innerText = "accelerationIncludingGravityx" + e.accelerationIncludingGravity.x;
show5.innerText = "accelerationIncludingGravityy" + e.accelerationIncludingGravity.y;
show6.innerText = "accelerationIncludingGravityz" + e.accelerationIncludingGravity.z;
// 旋转速率?
show7.innerText = "rotationRate alpha" + e.rotationRate.alpha;
show8.innerText = "rotationRate beta" + e.rotationRate.beta;
show9.innerText = "rotationRate gamma" + e.rotationRate.gamma;
lasttime = new Date().getTime();
}
}, false);
var lasttime1 = 0;
window.addEventListener("deviceorientation", function(e) {
console.log(e);
if(new Date().getTime() - lasttime1 > 1000) {
// 旋转角度
show10.innerText = "rotationRate alpha" + e.alpha;
show11.innerText = "rotationRate beta" + e.beta;
show12.innerText = "rotationRate gamma" + e.gamma;
lasttime1 = new Date().getTime();
}
}, false);
