vue使用百度地图API

  1.在html中写一个div确定地图范围

<div id="map"></div>

2. 下载jsonp第三方包用以引入百度地图的js文件    

//下载jsonp第三方包
npm i jsonp
//导入jsonp第三方包
import jsonp from "jsonp";
//jsonp语法：jsonp(请求地址，{配置项}，回调函数)
mounted() {
    jsonp(
      "https://api.map.baidu.com/api?v=2.0&type=webgl&ak=你自己申请的key",
      {},
      // 初始化地图
      () => {
        this.initMap();
     }
   );
},

 3.初始化地图

 // 百度API会向window上暴露一个叫做BMapGL的变量
 // 用暴露的变量BMapGL创建地图
  methods: {
    initMap() {
      // 初始化地图
      // 百度API会向window上暴露一个叫做BMapGL的变量
      // 用暴露的变量BMapGL创建地图
      // 1.表示初始化把地图绘制在什么位置
      const map = new window.BMapGL.Map("map");
      console.log(map);
      // 2.绘制坐标点
      // 116.404, 39.915 经纬度
      // 经纬度向后端获取
      const point = new window.BMapGL.Point(116.404, 39.915);
      console.log(point);
      // 3.在map上以point为点，绘制地图,设置中心点坐标和地图级别
      map.centerAndZoom(point, 15);
      //开启鼠标滚轮缩放
      map.enableScrollWheelZoom(true);
      map.setHeading(64.5); //设置地图旋转角度
      map.setTilt(73); //设置地图的倾斜角度
      var scaleCtrl = new window.BMapGL.ScaleControl(); // 添加比例尺控件
      map.addControl(scaleCtrl);
      var zoomCtrl = new window.BMapGL.ZoomControl(); // 添加缩放控件
      map.addControl(zoomCtrl);
      var cityCtrl = new window.BMapGL.CityListControl(); // 添加城市列表控件
      map.addControl(cityCtrl);
   },
},