亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時間:2019年07月06日 09:29:38   投稿:zx  
這篇文章主要介紹了

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

語法:

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

參數(shù):

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

2.success - 成功得到位置信息時的回調(diào)函數(shù)

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

position中返回的信息如下圖:

  • accuracy 獲取到的緯度或者經(jīng)度的精度(以米為單位)
  • altitude 當(dāng)前地理位置的海撥高度(不能獲取為null)
  • altitudeAccurancy 獲取到的海撥高度的經(jīng)度(以米為單位)
  • heading 設(shè)備移動的方向(以度為單位)
  • latitude 當(dāng)前地理位置的緯度
  • longitude 當(dāng)前地理位置的經(jīng)度
  • speed 設(shè)備的前進(jìn)速度(以米/秒為單位,不能獲取時為null)
  • timestamp 獲取地理位置信息時的時間

3.error - 獲取位置信息失敗時的回調(diào)函數(shù)

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

error中返回的信息如下圖

code屬性有以下值:

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

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

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

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

5.使用Geolocation.getCurrentPosition()獲取經(jīng)緯度信息,并轉(zhuǎn)換為百度坐標(biāo)并進(jìn)行逆地址解析:

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

獲取位置,標(biāo)記marker并進(jìn)行逆地址解析代碼如下:

    // 1 查詢當(dāng)前位置信息
    getPosition() {
      navigator.geolocation.getCurrentPosition(this.getPositionSuccess, this.getPositionError, {"enableHighAccuracy": true, "timeout": 5000, "maximumAge": 5000})
    },
    // 1-1 查詢當(dāng)前位置信息成功
    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()
      // 坐標(biāo)轉(zhuǎn)換
      convertor.translate(pointArr, 1, 5, this.translateCallback)
    },
    // 1-2 查詢當(dāng)前位置信息失敗
    getPositionError(error) {
      this.$toast({
        message: `獲取地理位置失敗請重試~`,
        duration: 1000
      })
    },
     // 坐標(biāo)轉(zhuǎn)換回調(diào)
    translateCallback(data) {
      if (data.status === 0) {
        // 在地圖上標(biāo)注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){
            // 獲取逆地址解析結(jié)果
            that.clockSite = result.address
          }   
        })
      }
    },

坐標(biāo)轉(zhuǎn)換convertor.translate()方法說明:

語法:

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

參數(shù):

  • coords:需轉(zhuǎn)換的源坐標(biāo)
  • from: 源坐標(biāo)類型 詳見:[類型詳情][4]
  • to: 目標(biāo)坐標(biāo)類型 詳見:[類型詳情][5]
  • fn: 轉(zhuǎn)換結(jié)果回調(diào)

6.使用cordova+vue開發(fā)webapp中定位解決方法:

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

cordova plugin add cordova-plugin-geolocation

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue3中element Plus插槽示例詳解

    vue3中element Plus插槽示例詳解

    這篇文章主要介紹了vue3中element Plus插槽,#default=scope定義了一個名為 default 的插槽,并將當(dāng)前行的數(shù)據(jù)傳遞給一個名為 scope 的變量,本文結(jié)合示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2024-05-05
  • 深入理解Vue Computed計算屬性原理

    深入理解Vue Computed計算屬性原理

    Computed 計算屬性是 Vue 中常用的一個功能,本篇文章主要介紹了Vue Computed 計算屬性原理,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-05-05
  • Vue.js render方法使用詳解

    Vue.js render方法使用詳解

    這篇文章主要為大家詳細(xì)介紹了Vue.js render方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-04-04
  • Vue文本模糊匹配功能如何實現(xiàn)

    Vue文本模糊匹配功能如何實現(xiàn)

    這篇文章主要介紹了Vue文本模糊匹配功能如何實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2020-07-07
  • Vue.js暴露方法給WebView的使用操作

    Vue.js暴露方法給WebView的使用操作

    這篇文章主要介紹了Vue.js暴露方法給WebView的使用操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-09-09
  • Vue指令實現(xiàn)大屏元素分辨率適配詳解

    Vue指令實現(xiàn)大屏元素分辨率適配詳解

    這篇文章主要為大家介紹了Vue指令實現(xiàn)大屏元素分辨率適配詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-09-09
  • 強烈推薦!Vue3.2中的setup語法糖

    強烈推薦!Vue3.2中的setup語法糖

    script?setup是vue3的新語法糖,并不是新增的功能模塊,只是簡化了以往的組合式API必須返回(return)的寫法,并且有更好的運行時性能,這篇文章主要給大家介紹了關(guān)于Vue3.2中setup語法糖的相關(guān)資料,需要的朋友可以參考下
    2021-12-12
  • 在antd Form表單中select設(shè)置初始值操作

    在antd Form表單中select設(shè)置初始值操作

    這篇文章主要介紹了在antd Form表單中select設(shè)置初始值操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • vue3的setup語法糖簡單封裝ckediter的過程

    vue3的setup語法糖簡單封裝ckediter的過程

    Vue3官方提供了 script setup 語法糖,只需在script標(biāo)簽中添加setup,組件只需引入不用注冊,屬性和方法也不用返回,今天通過本文給大家分享vue3的setup語法糖簡單封裝ckediter的過程,感興趣的朋友一起看看吧
    2023-10-10
  • element-ui自定義表格如何給input雙向綁定數(shù)據(jù)

    element-ui自定義表格如何給input雙向綁定數(shù)據(jù)

    這篇文章主要介紹了element-ui自定義表格如何給input雙向綁定數(shù)據(jù),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-10-10

最新評論