<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
        問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
        當前位置: 首頁 - 科技 - 知識百科 - 正文

        cordova+vue+webapp使用html5獲取地理位置的方法

        來源:懂視網 責編:小采 時間:2020-11-27 21:54:09
        文檔

        cordova+vue+webapp使用html5獲取地理位置的方法

        cordova+vue+webapp使用html5獲取地理位置的方法:1.在HTML5中使用Geolocation.getCurrentPosition()方法來獲取地理位置。 語法: navigator.geolocation.getCurrentPosition(success, error, options) 參數: success: 成功得到位置信息時的回調函數,使用Position 對象作為唯
        推薦度:
        導讀cordova+vue+webapp使用html5獲取地理位置的方法:1.在HTML5中使用Geolocation.getCurrentPosition()方法來獲取地理位置。 語法: navigator.geolocation.getCurrentPosition(success, error, options) 參數: success: 成功得到位置信息時的回調函數,使用Position 對象作為唯

        1.在HTML5中使用Geolocation.getCurrentPosition()方法來獲取地理位置。

        語法:

        navigator.geolocation.getCurrentPosition(success, error, options)

        參數:

      1.  success: 成功得到位置信息時的回調函數,使用Position 對象作為唯一的參數。
      2. error: 獲取位置信息失敗時的回調函數,使用 PositionError 對象作為唯一的參數,這是一個可選項。
      3. options:一個可選的PositionOptions 對象,包含以下3個參數。
      4. enableHighAccuracy 是一個Boolean值,用來表明應用是否使用其最高精度來表示結果,默認為false。
      5. timeout 是一個正的long值,表明的是設備必須在多長時間(單位毫秒)內返回一個位置,默認是Infinity。
      6. maximumAge 是一個正的long值,表明可以返回多長時間(即最長年齡,單位毫秒)內的可獲取的緩存位置。如果設置為 0,說明設備不能使用一個緩存位置,而且必須去獲取一個真實的當前位置。如果設置為 Infinity ,那么不管設置的最長年齡是多少,設備都必須返回一個緩存位置。默認值:0
      7. 2.success - 成功得到位置信息時的回調函數

        navigator.geolocation.getCurrentPosition(function(position)) {
         // 獲取成功時的的處理
         //參數position是地理位置對象
        }

        position中返回的信息如下圖:

      8. accuracy 獲取到的緯度或者經度的精度(以米為單位)
      9. altitude 當前地理位置的海撥高度(不能獲取為null)
      10. altitudeAccurancy 獲取到的海撥高度的經度(以米為單位)
      11. heading 設備移動的方向(以度為單位)
      12. latitude 當前地理位置的緯度
      13. longitude 當前地理位置的經度
      14. speed 設備的前進速度(以米/秒為單位,不能獲取時為null)
      15. timestamp 獲取地理位置信息時的時間
      16. 3.error - 獲取位置信息失敗時的回調函數

        navigator.geolocation.getCurrentPosition(function(position){
         // 獲取成功時的的處理;
         //參數position是地理位置對象
        },function(error)) {
         // 獲取失敗時的的處理;
        }

        error中返回的信息如下圖

        code屬性有以下值:

        - 1 地理位置信息的獲取失敗,因為該頁面沒有獲取地理位置信息的權限。
        - 2 地理位置獲取失敗,因為至少有一個內部位置源返回一個內部錯誤。
        - 3 獲取地理位置超時,通過定義PositionOptions.timeout 來設置獲取地理位置的超時時長。

        message 返回一個開發者可以理解的 DOMString 來描述錯誤的詳細信息。

        4.使用Geolocation.getCurrentPosition()注意事項:

        1. 本地項目中在Chrome瀏覽器中運行時,無法獲取到經緯度信息,原因是Chrome已不再支持非安全域的
        2. 瀏覽器定位請求,只有在https下才可使用定位。在IE、Eage、Firefox下親測可以獲取的經緯度信息。獲取到的GPS經緯度信息在百度地圖展示位置會與實際位置不同,是因為百度對外接口的坐標系為BD09
        3. 坐標系,并不是GPS采集的真實經緯度,在使用百度地圖JavaScript API服務前,需先將非百度坐標通過坐標轉換接口轉換成百度坐標。(轉換方法詳見下文)

        5.使用Geolocation.getCurrentPosition()獲取經緯度信息,并轉換為百度坐標并進行逆地址解析:

        以Vue項目為例,首先根目錄index.html中引入百度API文件,如下圖:

        獲取位置,標記marker并進行逆地址解析代碼如下:

         // 1 查詢當前位置信息
         getPosition() {
         navigator.geolocation.getCurrentPosition(this.getPositionSuccess, this.getPositionError, {"enableHighAccuracy": true, "timeout": 5000, "maximumAge": 5000})
         },
         // 1-1 查詢當前位置信息成功
         getPositionSuccess(position) {
         this.latitude = String(position.coords.latitude)
         this.longitude = String(position.coords.longitude)
         let ggPoint = new BMap.Point(this.longitude, this.latitude)
         let pointArr = []
         pointArr.push(ggPoint)
         let convertor = new BMap.Convertor()
         // 坐標轉換
         convertor.translate(pointArr, 1, 5, this.translateCallback)
         },
         // 1-2 查詢當前位置信息失敗
         getPositionError(error) {
         this.$toast({
         message: `獲取地理位置失敗請重試~`,
         duration: 1000
         })
         },
         // 坐標轉換回調
         translateCallback(data) {
         if (data.status === 0) {
         // 在地圖上標注marker
         let marker = new BMap.Marker(data.points[0])
         map.addOverlay(marker)
         map.panTo(data.points[0])
         // 逆地址解析
         let myGeo = new BMap.Geocoder()
         let that = this
         myGeo.getLocation(data.points[0], function(result){ 
         if (result){
         // 獲取逆地址解析結果
         that.clockSite = result.address
         } 
         })
         }
         },

        坐標轉換convertor.translate()方法說明:

        語法:

        convertor.translate(coords, from, to, fn)

        參數:

      17. coords:需轉換的源坐標
      18. from: 源坐標類型 詳見:[類型詳情][4]
      19. to: 目標坐標類型 詳見:[類型詳情][5]
      20. fn: 轉換結果回調
      21. 6.使用cordova+vue開發webapp中定位解決方法:

        在cordova中安裝Geolocation插件后,方可在生成的app中獲取到地理位置信息,運行如下命令即可:

        cordova plugin add cordova-plugin-geolocation

        聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

        文檔

        cordova+vue+webapp使用html5獲取地理位置的方法

        cordova+vue+webapp使用html5獲取地理位置的方法:1.在HTML5中使用Geolocation.getCurrentPosition()方法來獲取地理位置。 語法: navigator.geolocation.getCurrentPosition(success, error, options) 參數: success: 成功得到位置信息時的回調函數,使用Position 對象作為唯
        推薦度:
        標簽: VUE 地理位置 html5
        • 熱門焦點

        最新推薦

        猜你喜歡

        熱門推薦

        專題
        Top
        主站蜘蛛池模板: 成人黄软件网18免费下载成人黄18免费视频 | 亚洲av永久无码| 人妻视频一区二区三区免费| 亚洲欧洲日产国码久在线观看 | 男女猛烈激情xx00免费视频| 国产一级淫片视频免费看| 国产精品自拍亚洲| 免费一级毛片在级播放| 深夜福利在线视频免费| 亚洲日韩国产成网在线观看| 免费无遮挡无遮羞在线看 | 18亚洲男同志videos网站| 7723日本高清完整版免费| 亚洲一级毛片视频| 日韩免费视频在线观看| 国产亚洲漂亮白嫩美女在线| 亚洲av无码天堂一区二区三区| 中文字幕免费在线观看动作大片| 国产亚洲精AA在线观看SEE| 国产国产人免费视频成69堂| 亚洲AV无码无限在线观看不卡 | 成人毛片免费网站| 美女露隐私全部免费直播| 国产亚洲精品激情都市| 无码日韩精品一区二区免费暖暖 | 亚洲午夜国产精品无卡| 成人毛片免费播放| 一个人免费播放在线视频看片| 亚洲精品国产字幕久久不卡| 24小时日本电影免费看| 亚洲色偷偷偷综合网| 亚洲中久无码不卡永久在线观看| 免费国产成人18在线观看| 亚洲三级中文字幕| 精品亚洲一区二区三区在线观看 | 欧亚一级毛片免费看| 亚洲av无码不卡一区二区三区| 曰曰鲁夜夜免费播放视频| 在线91精品亚洲网站精品成人| 亚洲国产精品久久久天堂| 日韩一级免费视频|