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>

有些文章中說需要引入，纔可以使用，我這邊如果引入的話是會直接報如下錯誤的：

（注：該方法使用強行引入多頁應用的開發方式，有些破壞整個項目的框架，影響性能。）

等待發版的時間編輯一下這個文章作爲自己的備註，方便以後查找使用。