在vue项目中使用百度地图

1.首先在新建的vue项目中build文件夹下的webpack.base.conf.js文件中进行如下配置。

module.exports = {

  context: path.resolve(__dirname, '../'),

  entry: {

    app: './src/main.js'

  },

  externals: {

    "BMap": "BMap"

  },

2.配置完成后在 http://lbsyun.baidu.com/apiconsole/key申请密钥（ak)，如果是前端开发者记得应用类型一定要选择浏览器端。

3.在vue项目下的index.html中添加

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

如图所示：

index.png

其中的getscript也可以写成api，如果使用api会发现控制台有警告信息，如图所示：

error.png

错误原因是：页面渲染完成后使用了document.write()。

4.在使用到地图的页面引入BMap，在monuted函数中进行地图初始化等一系列的地图操作，切记只有dom加载完毕后地图才能初始化。完整页面代码如下所示：

<template>
    <div class="pc-map">
        <div id="allmap" class="allmap"></div> 
    </div>
</template>

<script>
import BMap from 'BMap'
export default {
    name: 'HelloWorld',
    data () {
        return {
        msg: 'Welcome to Your Vue.js App'
        }
    },
    mounted () {
        /**================================================= 地图初始化 start ============================================*/
        var map = new BMap.Map("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);     //开启鼠标滚轮缩放
        /**================================================= 地图初始化 end ============================================*/
        
        /**================================================= 添加信息窗口 start ============================================*/
        var opts = {    
            width : 250,     // 信息窗口宽度    
            height: 100,     // 信息窗口高度    
            title : "Hello"  // 信息窗口标题   
        }

        var infoWindow = new BMap.InfoWindow("World", opts);  // 创建信息窗口对象    
        map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口
    }
}
</script>

<style scoped>
#allmap {
    height: 100vh;
}
</style>

5.最后使用npm install下载包，再重新启动项目，就可以使用百度地图了。