写在前面

需求：vue项目中添加百度地图，实现具体业务。

一、效果：

image.png

二、下载安装vue-baidu-map

npm i --save vue-baidu-map

三、在main.js文件中引入百度

import BaiduMap from 'vue-baidu-map'
 
Vue.use(BaiduMap, {
  /* Visit http://lbsyun.baidu.com/apiconsole/key for details about app key. */
  ak: '你的百度ak'
})

四、创建的vue文件中使用

<template>
  <div class="map">
      <div class="grid-content" style="width: 100%;height: 99.9%">
        <baidu-map :center="center" :mapClick="false" :zoom="zoom"  @ready="handler" style="height:100%;width: 100%" :scroll-wheel-zoom='true' enableMapClick="false">
        </baidu-map>
</template>
······
 methods: { 
      handler ({BMap, map}) {
        let that = this;
        let point = new BMap.Point(116.447962, 39.90143); //北京
        this.map=map;
        map.centerAndZoom(point, 11);
        map.enableScrollWheelZoom(true);
        that.setRegion();
        //添加地图类型控件
        let defaultOffset = new BMap.Size(0, 50);
        map.addControl(new BMap.MapTypeControl({
          mapTypes:[
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
          ],
          offset: defaultOffset,
         anchor: BMAP_ANCHOR_BOTTOM_LEFT
        }));
        map.setDefaultCursor('default');
  }
·····

备注：有问题可联系，看到会回复