vue中使用百度地图

1.首先在官网申请密钥: http://lbsyun.baidu.com/apiconsole/key 申请密钥

2. 在index.html中引用js文件，在头部引入

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

3.在 webpack.config.js 配置文件中配置BMap，在module.exports 中与entry平级；如果还有其他的，同样在下面引入就可以了，比 如自定义覆盖物BMap_Symbol_SHAPE_POINT等 (需要重新 npm run dev启动服务器才可以) ；

entry: {

        app: './src/main.js'

  },

  externals:｛

            "BMap": "BMap",

  }

4.在引用地图的组件中创建一个容器，定义容器的宽高

<div id="all-map" class="all-map" ></div>

.all-map{

            width: 600px;

            height: 600px;

}

5.在引用地图的组件中引入BMap，否则会报”BMap undefined”的错误

import BMap from 'BMap'

6.在methods中定义创建地图的方法

BaiduMap(){

               /**地图初始化 start */

               var map = new BMap.Map("all-map");    // 创建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);    //开启鼠标滚轮缩放

7.在mounted生命周期中调用刚刚定义好的方法

mounted(){

             this.BaiduMap()

 }

然后会出现下面的效果：

在做项目的过程中参考其他人的经验整理的笔记