vue中使用百度地图的两种实现方法

方法一：
直接引用js。
1.在index.html中引入

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

2.添加配置
在webpack.base.conf.js文件中添加如下配置：

externals:{
    'BMap':'BMap'
},

位置放在webpack.base.conf.js文件中 entry: {}下面就可以了。
如图：

其实到这里就可以结束了，下面是一些更为详细的说明，其实可以忽略的。

有的说需要在webpack.dev.conf.js这个文件内也要添加配置，但是我本地测试这个可以不添加的，但是添加上也不报错。
如添加位置为：
devWebpackConfig内，和module、devtool、devServer平级即可，如图：

结束，这样就可以直接在页面内使用了。

使用页面的代码如下：

<template>
    <div class="signMap-wrap">
        <section class="content">
            <div id="allmap"></div>
	        <p>返回北京市“景点”关键字的检索结果，并展示在地图上</p>
        </section>
    </div>
</template>
<script>
export default {
    name: 'signMap',
    data() {
        return {
        
        }
    },
    mounted() {
        // 百度地图API功能
        var map = new BMap.Map("allmap");        
        console.log(map)  
        map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
        var local = new BMap.LocalSearch(map, {
            renderOptions:{map: map}
        });
        local.search("景点");
    },
    methods: {
    
    }
}
</script>
<style lang="scss" scoped>
@import "../../styles/mixin";
.signMap-wrap {
    #allmap{
        width: 100%;
        height: 100%;
    }
}
</style>

有些文章中说需要引入，才可以使用，我这边如果引入的话是会直接报如下错误的：

（注：该方法使用强行引入多页应用的开发方式，有些破坏整个项目的框架，影响性能。）

方法二：安装vue-baidu-map
1.安装

npm install vue-baidu-map --save

2.在main.js中引入并注册

import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
  	ak: 'http://api.map.baidu.com/api?v=2.0&ak=自己注册的ak'
})

使用方式同上。

等待发版的时间编辑一下这个文章作为自己的备注，方便以后查找使用。