vue 项目中引用百度地图

2018-12-20 09:35:10来源：博客园阅读 ()

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

    },