<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <title>navigator.geolocation</title> <style> * { margin: 0; padding: 0; } #box { width: 500px; height: 500px; border: 2px solid deeppink; } </style> </head> <body> <button id='btn'> 请求位置信息 </button> <div id="box"></div> <script> let btn = document.getElementById('btn'); let box = document.getElementById('box'); //点击按钮获取地理位置信息 btn.onclick = function () { //getCurrentPosition与定时器setInterval类似多次请求，因为位置需要不间断的获取 //直接navigator.geolocation表示单次获取位置 navigator.geolocation.getCurrentPosition(function (position) { box.innerHTML += "经度" + position.coords.longitude; box.innerHTML += "纬度" + position.coords.latitude; box.innerHTML += "准确度" + position.coords.accuracy; box.innerHTML += "海拔" + position.coords.altitude; box.innerHTML += "海拔准确度" + position.coords.altitudeAcuracy; box.innerHTML += "行进方向" + position.coords.heading; box.innerHTML += "地面速度" + position.coords.speed; box.innerHTML += "请求的时间" + new Date(position.timestamp); }, function (err) { alert(err.code); // code：返回获取位置的状态 // 0 : 不包括其他错误编号中的错误 // 1 : 用户拒绝浏览器获取位置信息 // 2 : 尝试获取用户信息，但失败了 // 3 : 设置了timeout值，获取位置超时了 }, { enableHighAcuracy: false, //位置是否精确获取 timeout: 5000, //获取位置允许的最长时间 maximumAge: 1000 //多久更新获取一次位置 }) } </script> </body> </html>
H5定位成功关键点：
1.开启手机的GPS；
2.用户得允许；
3.https的域名（否则在谷歌浏览器，微信中获取不到定位）
经实际测试，在App的webview中，https的可以获取到定位，http的获取不到定位。
H5获取不到定位的解决方案：
得有https的域名