Pc端-Vue页面接入百度地图

这里整理一下接入 百度地图 的流程，做一下记录

第一步，肯定还是注册账号，创建应用了。

百度地图官网有注册账号的步骤，这里就贴下截图 对照着上面的步骤那倒我们需要的AK就可以了 但是，有一个值得注意的点，第一次接入的人可能有点懵不知道下面的三种选哪个，通常的话用中间这个api就可以了。

第二步，就是在公共文件里去引用百度地图API文件。申请到的ak替换下就可以了

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=您的密钥">
</script>

以vue项目为例，我是放在utils里的公共js---Bmap.js

export default function MapLoader() {
  return new Promise((resolve, reject) => {
    if (window.BMap) {
      resolve(window.BMap);
      // var map = new AMap.Map("allmap");
    } else {
      const script = document.createElement('script');
      script.type = 'text/javascript';
      script.async = true;
      script.src = 'https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=您的密钥';
      script.onerror = reject;
      document.head.appendChild(script);
    }
    window.initAMap = () => {
      resolve(window.BMap);
    };
  });
}

然后就引入Bmap.js,在创建页面的时候调用下获取当前位置，然后就可以处理需要的逻辑了，是不是很简单

   //获取当前位置
    getLocationMap() {
      const _this = this;
      MapLoader().then(
        (Bmap) => {
          _this.map = new Bmap.Map('container', {
            enableScrollWheelZoom: true,
            enableMapClick: false,
          });
          const geolocation = new Bmap.Geolocation({
            // 是否使用高精度定位，默认：true
            enableHighAccuracy: true,
            // 设置定位超时时间，默认：无穷大
            timeout: 10000,
          });
          _this.map.addControl(geolocation);
          geolocation.getCurrentPosition(
            function (data) {
              if (this.getStatus() === BMAP_STATUS_SUCCESS) {
                if (data.accuracy == null) {
                  console.log('用户不允许定位');
                } else {
                  console.log('用户允许');
                }
              }
            },
            { enableHighAccuracy: true },
          );
          _this.map.addControl(geolocation);
        },
        (e) => {
          console.log('地图加载失败', e);
        },
      );
    },

还有值得注意的是pc端有的电脑是获取不到当前定位的，只有手机端可以，所以用户允许定位是需要在手机端测试的，好了很简单的，有什么不懂的可以评论区问我哦！