百度地图在vue中的使用

在vue页面中进行使用百度MAP需要我们在 百度地图开发平台 进行申请密钥，

1、优先进行登陆等操作

2、找到自己需要的文档（我主要使用的是vue的 web端）

3、中间可能需要进行身份验证，需要提供材料（这个页面里面具有详细的获取密钥的方式）

4、在src下新建Utils文件夹，新建一个文件名为bmpgl.js ，里面的内容如下：

export function BMPGL() {
  return new Promise(function (resolve, reject) {
    window.init = function () {
      // eslint-disable-next-line
      resolve(BMapGL);
    };
    const script = document.createElement("script");
    script.type = "text/javascript";
    let ak = "";
    if (process.env.NODE_ENV == "production") {
      ak = "你的AK密钥";
    } else {
      ak = "你的AK密钥";
    }
    script.src = `https://api.map.baidu.com/api?v=1.0&type=webgl&ak=${ak}&callback=init`;
    script.onerror = reject;
    document.head.appendChild(script);
  });
}

5、使用。在需要使用的问价下进行引入

import { BMPGL } from '@/Utils/bmpgl.js';

下面给出一个使用案例：(注意给container这个盒子添加高度，默认是0，可能导致你渲染成功了但是页面上并没有任何反应)

<div id="container"></div>

onMounted(() => {
  initMap();
});
const initMap = () => {
  BMPGL()
    .then((BMapGL) => {
      // 创建地图实例
      let map = new BMapGL.Map("container");
      // 创建点坐标 axios => res 获取的初始化定位坐标
      let point = new BMapGL.Point(longitudeCopy.value, latitudeCopy.value);
      // 初始化地图，设置中心点坐标和地图级别
      map.centerAndZoom(point, 12);
      //开启鼠标滚轮缩放
      map.enableScrollWheelZoom(true);
      var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
      map.addControl(scaleCtrl);
      var marker = new BMapGL.Marker(
        new BMapGL.Point(longitudeCopy.value, latitudeCopy.value)
      );
      // 在地图上添加点标记
      map.addOverlay(marker);
      console.log(props);
      var opts = {
        width: 200, // 信息窗口宽度
        height: 60, // 信息窗口高度
        title: props.title, // 信息窗口标题
        message: "工厂名称",
      };
      var infoWindow = new BMapGL.InfoWindow(`地址：${props.message}`, opts); // 创建信息窗口对象
      marker.addEventListener("click", function () {
        map.openInfoWindow(infoWindow, point); //开启信息窗口
      });
      var navi3DCtrl = new BMapGL.NavigationControl3D(); // 添加3D控件
      map.addControl(navi3DCtrl);
    })
    .catch((err) => {
      console.log(err);
    });
};

完毕！！！