新建一个loadBMap.js:

export default function loadBMap(ak) {

    return new Promise(function(resolve, reject) {

        if (typeof BMap !== 'undefined') {

        resolve(BMap)

        return true

        }

        window.onBMapCallback = function() {

        resolve(BMap)

        }

        let script = document.createElement('script')

        script.type = 'text/javascript'

        script.src =

        'http://api.map.baidu.com/api?v=2.0&ak=' + ak + '&callback=onBMapCallback'

        script.onerror = reject

        document.head.appendChild(script)

    })

    }

需要的页面导入js文件：

html代码：

<div class="map-area" :id="mapId"></div>

script代码：

data() {

      return {

        mapId: 'BMap-' + parseInt(Date.now() + Math.random()),

        myMap: null

      }

    },

    mounted() {

      this.initMap()

    },

    methods: {

      initMap() {

        loadBMap('xxxxx')//百度地图密钥

          .then(() => {

            // 百度地图API功能

            this.myMap = new BMap.Map(this.mapId) // 创建Map实例

            let point = new BMap.Point(108.892237, 34.202461)

            this.myMap.centerAndZoom(point, 17);

            this.myMap.addOverlay(new BMap.Marker(point));// 初始化地图,设置中心点坐标和地图级别

            //添加地图类型控件

            this.myMap.addControl(

              new BMap.MapTypeControl({

                mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]

              })

            )

            var opts = {

              width: 330,

              height: 110,

              title: 'xxxxxx',

            };

            var inforwindow = new BMap.InfoWindow("<br>地址：xxxxxxxx <br>电话：xxxxxxxx<br>手机：xxxxxxx", opts);

            this.myMap.openInfoWindow(inforwindow, point);

          })

          .catch(err => {

            console.log('地图加载失败')

          })

      }

    }