vue中使用百度地图

1.申请key

2.新建文件夹bmpgl.js

export function BMPGL(ak) {

    return new Promise(function(resolve, reject) {

      window.init = function() {

        // eslint-disable-next-line

        resolve(BMapGL)

      }

      const script = document.createElement('script')

      script.type = 'text/javascript'

      script.src = `http://api.map.baidu.com/api?v=1.0&type=webgl&ak=${ak}&callback=init`

      script.onerror = reject

      document.head.appendChild(script)

    })

  }

 

3.在需要使用的页面引入

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

import { BMPGL } from "./bmpgl.js"

export default {

  name: 'AboutMe',

  data() {

    return {

        ak: "hvv31Hzt069G4NGGeDbpobdTOoDQhI3r", // 百度的地图密钥

      myMap: null

    };

  },

  mounted() {

    this.initMap();

  },

  methods: {

    initMap() {

      // 传入密钥获取地图回调。

      BMPGL(this.ak).then((BMapGL) => {

        // 创建地图实例

        let map = new BMapGL.Map("map");

        // 创建点坐标 axios => res 获取的初始化定位坐标

        let point = new BMapGL.Point(105.461408,29.277888)

        // 初始化地图，设置中心点坐标和地图级别

        map.centerAndZoom(point, 19)

        //开启鼠标滚轮缩放

        map.enableScrollWheelZoom(true)

        map.setHeading(64.5)

        map.setTilt(73)

        // 保存数据

        // this.myMap = map

        map.setHeading(1);   //设置地图旋转角度

        map.setTilt(1);       //设置地图的倾斜角度

      })

      .catch((err)=>{

        console.log(err)

      })

    },

  },

};

 

4.设置样式

#map{       //给地图个宽高

  width: 90%;

  margin: auto;

  margin-top: 3vh;

  height: 40%;

  position: relative;

  z-index: 1;

}