vue引用百度地图

1. index.html

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>

2. webpack.conf.js 与entry，output平级

externals: {
    'BMap': 'BMap'// 地图引用
},

3.单页面应用

 <template>
    <div class="map">
        <h4>{{this.province}}-{{this.city}}</h4>
        <div id="allmap"></div>
    </div>
</template>
<script>
import { Toast } from 'vant';
export default {
    data(){
        return{
             province:this.$route.query.id2,
             city:this.$route.query.id
        }
    },
    mounted(){
        this.BaiduMap()
    },
    methods:{
        BaiduMap(){
            var map = new BMap.Map('allmap');
            map.centerAndZoom(this.city);
            // 覆盖区域图层测试
            map.addTileLayer(new BMap.PanoramaCoverageLayer());
        }
    }
}
</script>
<style lang="scss" scoped>
    .map{
        h4{
            text-align: center;
            padding: 10px 0;
        }
    }
    >>>.anchorBL,
    >>>.anchorTR,
    >>>.BMap_zlHolder{// 隐藏百度logo
        display: none;
        visibility: hidden;
    }
    body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
    #allmap{width:100%;height:500px;}
</style>

亲测有效，效果图~