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

語(yǔ)法：

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

參數(shù)：

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

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

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

position中返回的信息如下圖：

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

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

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

error中返回的信息如下圖

code屬性有以下值：

- 1 地理位置信息的獲取失敗，因?yàn)樵擁?yè)面沒(méi)有獲取地理位置信息的權(quán)限。
- 2 地理位置獲取失敗，因?yàn)橹辽儆幸粋€(gè)內(nèi)部位置源返回一個(gè)內(nèi)部錯(cuò)誤。
- 3 獲取地理位置超時(shí)，通過(guò)定義PositionOptions.timeout 來(lái)設(shè)置獲取地理位置的超時(shí)時(shí)長(zhǎng)。

message 返回一個(gè)開(kāi)發(fā)者可以理解的 DOMString 來(lái)描述錯(cuò)誤的詳細(xì)信息。

4.使用Geolocation.getCurrentPosition()注意事項(xiàng)：

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

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

以Vue項(xiàng)目為例，首先根目錄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: `獲取地理位置失敗請(qǐng)重試~`,
        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()方法說(shuō)明：

語(yǔ)法：

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

參數(shù)：

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

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

在cordova中安裝Geolocation插件后，方可在生成的app中獲取到地理位置信息，運(yùn)行如下命令即可：

cordova plugin add cordova-plugin-geolocation

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

最新評(píng)論