搭建环境

  • Vue 2.9.6
  • Element-UI 2.13.2

准备工作


打开百度地图开放平台官网,来到页面最下方进行注册,已有百度账号可直接登录。


从导航栏处点击进入到控制台

左侧菜单 ——> 应用管理 ——> 我的应用 ——> 创建应用


应用名称可随意填写,应用类型选择浏览器端。


创建完成之后我的应用中就可以看到,AK(Access Key)待会儿需要用到。

接入项目

新建一个单独的js文件,作用是传入ak的值,在页面的Header动态拼接一个加载百度地图js的Script标签。文件名称和位置随意,我这里文件的名称是gis.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即可
完整代码

<template>
    <div class="app-container">
        <el-card class="box-card" :body-style="{ padding: '0px' }">
        <div slot="header" class="clearfix">
            <span>地图</span>
        </div>
        <div class="map-area" :id="mapId"></div>
        </el-card>
    </div>
</template>
<script>
import loadBMap from '@/api/dataFocus/gis.js'
export default {
    data() {
        return {
            mapId: 'BMap-' + parseInt(Date.now() + Math.random()),
            myMap: null,
            siteName: undefined,
        }
    },
    created() {
        this.siteName = '成都';
    },
    mounted() {
    this.initMap()
    },
    methods: {
        initMap() {
	    // 填入应用的AK
            loadBMap('xxxxxxxxxx')
            .then(() => {
                // 百度地图API功能
                this.myMap = new BMap.Map(this.mapId) // 创建Map实例
                this.myMap.centerAndZoom(this.siteName, 11) // 初始化地图,设置中心点坐标和地图级别
                //添加地图类型控件
                this.myMap.addControl(
                    new BMap.MapTypeControl({
                    mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]
                    })
                );
                this.myMap.addControl(new BMap.ScaleControl({
                    anchor: BMAP_ANCHOR_TOP_LEFT
                }));
                this.myMap.setCurrentCity(this.siteName) // 设置地图显示的城市 此项是必须设置的
                this.myMap.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
            })
            .catch(err => {
                console.log('地图加载失败')
            })
        }
    }
}
</script>
<style scoped>
.map-area {
    width: 100%;
    height: 500px;
}
</style>

效果图

参考资料

记录Vue异步加载百度地图

Q.E.D.


The best thing you can do at work hard.