丸子学HTML（学习15分钟 - 地理定位）

● 在HTML规范中，增加了获取用户地理信息的API，这样使得我们可以基于用户位置开发互联网应用，即基于位置服务 (Location Base Service)
● 获取地理信息方式如下图对不同获取方式的优缺点进行了比较，浏览器会自动以最优方式去获取用户地理信息。
a. IP地址
b. 三维坐标
■ GPS （Global Postioning System 全球定位系统）
■ Wi-Fi
■ 手机信号
c. 用户自定义数据

● 隐私：推送通知
HTML5 Geolocation(地理位置定位) 规范提供了一套保护用户隐私的机制。必须先得到用户明确许可，
才能获取用户的位置信息
● API说明：
a) navigator.getCurrentPosition(successCallback,errorCallback, options) 获取当前地理信息
b) navigator.watchPosition(successCallback,errorCallback, options) 重复获取当前地理信息
c) 当成功获取地理信息后，会调用succssCallback，并返回一个包含位置信息的对象
positionCoords(坐标)
d) position.coords.latitude纬度
e) position.coords.longitude经度
f) 当获取地理信息失败后，会调用errorCallback，并返回错误信息error
g) 可选参数 options 对象可以调整位置信息数据收集方式

尝试一下

        let oPosBtn = document.getElementById('posBtn');
        let oContent = document.getElementsByClassName('content');
        oPosBtn.onclick = function() {
            if(navigator.geolocation){
                navigator.geolocation.getCurrentPosition(onSuccessCallback,onErrorCallback,{enableHighAcuracy: true})
            }else {
                console.log('Geolocation is not supported by this browser.');
            }
            // 成功
            function onSuccessCallback(e){
                oContent[0].innerHTML = `
                <p>纬度： ${e.coords.latitude}</p>
                <p>经度： ${e.coords.longitude}</p>
                <p>高度: ${e.coords.altitude}</p>
                <p>经纬度精确度: ${e.coords.accuracy}</p>
                <p>高度精确度: ${e.coords.altitudeAccuracy}</p>
                <p>当前移动的角度方向: ${e.coords.heading}</p>
                <p>当前对地速度: ${e.coords.speed}</p>
                `
            }
            // 失败
            function onErrorCallback(e) {
                switch(error.code) {
                    case error.TIMEOUT:
                        alert("A timeout occured! Please try again!");
                        break;
                    case error.POSITION_UNAVAILABLE:
                        alert('We can\'t detect your location. Sorry!');
                        break;
                    case error.PERMISSION_DENIED:
                        alert('Please allow geolocation access for this to work.');
                        break;
                    case error.UNKNOWN_ERROR:
                        alert('An unknown error occured!');
                        break;
                }
            }
        }