uni app +vue 引用 百度地圖API取位置，VUE用百度地圖獲取當前位置（城市）

uni app +vue 引用 百度地圖API取位置，VUE用百度地圖獲取當前位置（城市）

 

1.在index.html 引入 百度js

<script src="http://api.map.baidu.com/api?v=2.0&ak=你的密鑰" type="text/javascript"></script>

 

2.創建js文件，放入以下代碼：

 

export default {
    init: function () {
        const AK = "lyFvtNiZ2fH1jWqGIRMAxDwDbMwvXgsv";
        const BMap_URL = 'https://api.map.baidu.com/api?v=2.0&ak=' + AK + '&s=1&callback=onBMapCallback';
        return new Promise((resolve, reject) => {
            // 如果已加載直接返回
            if (typeof BMap !== 'undefined') {
                resolve(BMap);
                return true;
            }
            // 百度地圖異步加載回調處理
            window.onBMapCallback = function () {
                resolve(BMap);
            };
            let getCurrentCityName = function () {
                return new Promise(function (resolve, reject) {
                    let myCity = new BMap.LocalCity()
                    myCity.get(function (result) {
                        resolve(result.name)
                    })
                })
            }
            // 插入script腳本
            let scriptNode = document.createElement("script");
            scriptNode.setAttribute("type", "text / javascript");
            scriptNode.setAttribute("src", BMap_URL);
            document.body.appendChild(scriptNode);
        });
    }
}

3.需要用的組件里開始引用和調用
寫在方法里，在mounted里調用–下面代碼不可少

  mounted() {
    var isWeixn = this.is_weixn();
    if (isWeixn) {
      this.getCity();
    }
  },
  methods: {
    getCity() {
      map.init().then(BMap => {
        const locationCity = new BMap.Geolocation();
        var that = this;
        locationCity.getCurrentPosition(  
   function     getinfo(options){
                let city = options.address.city;    //此處拿到位置相關信息
                that.LocationCity = city;
                console.log(options)
              },
              function (e){
                that.LocationCity = '定位失敗';
                console.log('定位失敗')
              },
              {provider: 'baidu'}
            )
          })
    },
}