vue3 百度api获取当前浏览器的地理位置_vue3使用百度地图获取当前地理位置

import myBMap from '@/utils/baiduMap/bdMap.js';
 
 
// 获取城市/区的具体地理位置
const getCity = () => {
  myBMap.init().then(BMap => {
    const geolocation = new BMap.Geolocation();
 
    geolocation.getCurrentPosition(
      positionOptions => {
        // console.log(positionOptions);
        currentCity.value = positionOptions ? positionOptions.address?.district : currentCity.value;
      },
      positionError => {
        console.log(positionError.message);
      },
      { enableHighAccuracy: true }
    );
  });
};

打印出来的positionOptions包含经纬度和省份城市区域

下图是myBMap里封装的代码

export default {
  init: function () {
    const AK = ''; // 你的AK
    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);
      };
 
      // 插入script脚本
      let scriptNode = document.createElement('script');
      // scriptNode.setAttribute(type, 'text/javascript');
      scriptNode.setAttribute('src', BMap_URL);
      document.body.appendChild(scriptNode);
    });
  }
};

实测： 谷歌浏览器只能第一次允许地理位置才会出位置信息，火狐可以正常获取