vue3.0 引用百度地图

1.新建baiduMap

export function baiduMap(ak) {
  return new Promise(function(resolve, reject) {
    window.baiduMap = function() {
      resolve()
    }
    var script = document.createElement(‘script’)
    script.type = ‘text/javascript’
    script.src = `http://api.map.baidu.com/api?v=3.0&ak=${ak}&callback=baiduMap`
    script.onerror = reject
    document.head.appendChild(script)
  })
}

2.配置vue.config.js

externals: {
  BMap: ‘BMap’
}

3.实例化

<template>
  <div id=“map”></div>
</template>
<script>
import { baiduMap } from ‘@/tools/baiduMap’
export
default {
  data() {
    return {
      ak: ‘xxxxxx’
    }
  },
  mounted() {
    // 动态引入较大类库避免影响页面展示
    this.$nextTick(() => {
      let _this = this;
      baiduMap(_this.ak).then((mymap) => {
        // 创建地图实例
        let map = new BMap.Map(“map”);
        let point = new BMapGL.Point(119.949506, 29.089524);
        map.centerAndZoom(point, 10); //设置缩放级别  
      });
    };
  }
};
</script>