H5地理位置信息

地理信息

  1. 定位用戶的位置,使用HTML5 Geolocation API用於獲得用戶的位置
  2. 但是必須要獲取用戶的同意,否則不行
  3. 主要使用navigator.geolocation.getCurrentPosition(success, error, options)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            const {longitude,latitude,accuracy,altitude,altitudeAccuracy,heading,speed} = position.coords
            // 參數分析
            // longitude 經度
            // latitude 緯度
            // accuracy 準確度
            // altitude 海拔
            // altitudeAccuracy 海拔準確度
            // heading 行進方向
            // speed 地面速度
            // position.timestamp 請求的時間
            console.log(position)
        }, function (error) {
            // error.code
            // 0: 不包括其它錯誤編號中的錯誤
            // 1: 用戶拒絕獲取位置信息
            // 2: 嘗試獲取用戶信息,但是失敗了
            // 3: 設置了timeout,獲取位置超時了
            alert(error.message)
        }, {
            enableHighAccuracy: false, // 位置是否精確獲取
            timeout: 8000, // 獲取位置允許的最長時間,默認爲infinity
            maximumAge: 1000 // 多久更新獲取一次位置,位置可以緩存的最大時間,默認爲0
        })
    } else {
        alert("你的瀏覽器不支持Geolocation,建議升級")
    }
</script>
</body>
</html>

重複性位置更新請求

  1. navigator.geolocaton.watchPosition(請求成功,請求失敗,數據收集方式)
  2. 這個只會在移動設備上有用,位置改變纔會觸發
  3. 配置參數:frequency更新的頻率
  4. 使用clearWatch關閉更新請求

百度地圖api:http://lbsyun.baidu.com/

高德地圖api:http://lbs.amap.com/

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章