vue 項目中引用百度地圖

新建map.js

export const BaiduMap = {
    init: function() {
        const BMapURL = 'https://api.map.baidu.com/api?v=3.0&ak=' + AK + '&s=1&callback=onBMapCallback'
　　　　 return new Promise((resolve, reject) => {
            // 若是已加載直接返回
            if (typeof BMap !== 'undefined') {
                resolve(BMap)
                return true
            }
            // 百度地圖異步加載回調處理
            window.onBMapCallback = function() {
                console.log('百度地圖腳本初始化成功...')
                resolve(BMap)
            };
            // 插入script腳本
            let scriptNode = document.createElement('script')
            scriptNode.setAttribute('type', 'text/javascript')
            scriptNode.setAttribute('src', BMapURL)
            document.body.appendChild(scriptNode)
        })
    }
}

在引用的組件中引入map.js

import {
        BaiduMap
} from '@/common/js/map.js';

div包裹引用

<template>
    <div>
        <div id="allmap" ref="allmap"></div>
    </div>
</template>

設置css高度

<style lang="scss" scoped>
#allmap{
    height:400px;
}
</style>

調用方法

mounted() {
        this.$nextTick(function() {
            BaiduMap.init().then(BMap => {
                let map = new BMap.Map(this.$refs.allmap);  // 建立Map實例
                map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地圖,設置中心點座標和地圖級別
                map.addControl(new BMap.MapTypeControl({ //添加地圖類型控件
                    mapTypes: [
                        BMAP_NORMAL_MAP,
                        BMAP_HYBRID_MAP
                    ]
                }));
                map.setCurrentCity("北京"); // 設置地圖顯示的城市 此項是必須設置的
                map.enableScrollWheelZoom(true);  //開啓鼠標滾輪縮放
            })
        })

    },

搞定！