首先我用的框架是Vue+vant 寫的h5頁面

一：在main.js中

import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap,{
  ak:'KtmkN07XXXXXXXXXmiKbWp9B2'//自己去百度API申請，免費的
})

二：在index.html中

 <scripttype="text/javascript"src="https://api.map.baidu.com/api?v=2.0&ak=KtmkN076TmqTs6NqU4Bx1qHmiKbWp9B2"></script>

三：在需要使用者資訊的頁面

  mounted() {
    this.city();
  },
  methods: {
    city() {
      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, 9);
            this.latitude = options.latitude;
            this.longitude = options.longitude;
            this.accuracy = options.accuracy
          },
          function (e) {
            console.log("2", e);
            that.LocationCity = "定位失敗";
            console.log(
 
"定位失敗");
          },
          { provider: "baidu" }
        );
      });
    },

四：引入的js檔案

export default {
  init: function (){
  const AK = "KtmkN076TmqTs6NqU4Bx1qHmiKbWp9B2";
  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);
  });
  }
  }