Vue 通過調用百度API獲取地理位置-經度緯度省份城市

一、首先在百度api註冊獲得ak密鑰

 

 

 

二、新建js文件，我命名爲loadBMap.js，裏面創建script，代碼如下：

/**
 * 加載地圖
 * @param {Function} callback 回調函數名稱，回調函數將會掛載到window上，例如：window.initBaiduMapScript，在方法中就能拿到BMap對象
 */
export function loadBMap(callback) {
  var script = document.createElement('script')
  script.src = 'http://api.map.baidu.com/api?v=2.0&ak=你的AK&callback=' + callback
  document.body.appendChild(script)
}

 

三、在Vue頁面中導入js

import { loadBMap } from './loadBMap'

 

四、在Vue頁面中定義一些需要用到的數據

data () {
  return {
    BMap: null,
    geolocation: null, // Geolocation對象實例
    positioning: false, // 定位中
    positioningInterval: null, // 定位倒計時計時器
    countDown: 30, // 倒計時，單位秒
    location: null // 位置信息
  }
}

 

四、在mounted中調用創建回調函數，並調用loadMap方法，將回調函數名稱傳遞到loadMap中

mounted() {
  const _this = this
  window.initBaiduMapScript = () => {
    _this.BMap = window.BMap
  }
  loadBMap('initBaiduMapScript')
}

 

五、在methods中定義獲取地理位置的方法

// 獲取地理定位
getLocation() {
  const _this = this
  _this.geolocation = new _this.BMap.Geolocation()
  if (_this.geolocation) {
    // 開啓SDK輔助定位，僅當使用環境爲移動web混合開發，且開啓了定位sdk輔助定位功能後生效
    _this.geolocation.enableSDKLocation()
    // 開始定位
    this.positioning = true
    // 倒計時
    this.positioningInterval = setInterval(() => {
      if (this.countDown === 0) {
        this.countDown = 30
        clearInterval(this.positioningInterval)
      } else {
        this.countDown--
      }
    }, 1000)
    // 位置選項
    const positionOptions = {
      enableHighAccuracy: true, // 要求瀏覽器獲取最佳結果
      timeout: 30, //    超時時間
      maximumAge: 0 // 允許返回指定時間內的緩存結果。如果此值爲0，則瀏覽器將立即獲取新定位結果
    }
    // 獲取用戶位置信息
    _this.geolocation.getCurrentPosition(position => {
      _this.resetPositioning()
      // 獲取定位結果狀態碼
      const statusCode = _this.geolocation.getStatus()
      let msg = '由於未知錯誤而無法檢索設備的位置' // 提示消息
      let msgType = 'error' // 消息類型
      // 判斷結果狀態碼，爲0代表獲取成功，讀取省市、經緯度
      switch (statusCode) {
        case 0:
          msgType = 'success'
          msg = '獲取地理位置定位請求成功'
          if (position) {
            // 數據變量定義
            let lat = 0.0 // 經度
            let lng = 0.0 // 緯度
            let province = '未知' // 經度
            let city = '未知' // 緯度

            // 座標
            if (position.point) {
              lat = position.point.lat
              lng = position.point.lng
            }
            // 位置
            if (position.address) {
              province = position.address.province
              city = position.address.city
            }
            _this.location = {
              省份: province,
              城市: city,
              經度: lat,
              緯度: lng
            }
          } else {
            msg = '由於未知錯誤而無法檢索設備的位置'
          }
          break
        case 2:
          msg = '由於未知錯誤而無法檢索設備的位置'
          break
        case 4:
        case 5:
          msg = '位置服務請求非法'
          break
        case 6:
          msg = '應用程序沒有使用位置服務的權限'
          break
        case 7:
          msg = '網絡不可用或者無法連接到獲取位置信息的衛星'
          break
        case 8:
          msg = '無法在指定的最大超時間隔內檢索位置信息'
          break
        default:
          msg = '由於未知錯誤而無法檢索設備的位置'
          break
      }
      _this.$notification[msgType]({
        key: NotificationKey,
        message: '提示',
        description: msg
      })
    }, positionOptions)
  } else {
    _this.$notification.error({
      key: NotificationKey,
      message: '提示',
      description: '您的瀏覽器不支持地理位置服務'
    })
  }
},
// 重置定位相關數據
resetPositioning() {
  this.positioning = false
  this.location = null
  this.countDown = 30
  clearInterval(this.positioningInterval)
}

 

六、在需要的地方調用getLocation即可，例如：

<a-form-model-item label="地理位置" prop="location">
  <span>{{ location }}</span>
  <a v-show="!location && !positioning" @click="getLocation">點擊獲取位置</a>
  <a-spin :spinning="positioning" />
  <span v-show="positioning">
    &nbsp;還需等待
    <span class="red">{{ countDown }}</span> 秒
  </span>
</a-form-model-item>

 

效果：

【獲取前】

 

【獲取中】

 

【獲取後】