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);  //开启鼠标滚轮缩放
            })
        })

    },

搞定！