vue-百度地图

由于公司需求，需要引用百度地图来确定配送范围（覆盖物），本人不是专业前端，只做一个简单分享，可能不是很清晰，有高见望指教。

公司前端是用vue写的，所以百度地图需要先引入百度地图vue的插件

第一步：下载vue百度地图插件

获取地址：链接：百度网盘 请输入提取码

提取码：1212

第二步：页面引入：

import BaiduMap from 'vue-baidu-map/components/map/Map.vue';
export default {
  components: {
    BaiduMap,
  },

第三步：创建地图实例

<div class="map">
  <el-input v-model="addressKeyword" placeholder="请输入地址来直接查找相关位置"></el-input>
  <!-- 给地图加点击事件getLocationPoint，点击地图获取位置相关的信息，经纬度啥的 -->
  <!-- scroll-wheel-zoom：是否可以用鼠标滚轮控制地图缩放，zoom是视图比例 
  center中心点 map-click：点击地图是否显示标志物-->
  <baidu-map  v-if="open2"
              :center="pointBak"
             :zoom="14"
             :map-click="false"
             :scroll-wheel-zoom="true"
              @click="paintPolygon"
             @ready="mapReady"
             style="width: 400px;height: 400px;border: #1c84c6">
    <bm-marker :position="this.pointBak" :dragging="true" @dragend="dragend" >
    </bm-marker>
    <bm-control>
      <button @click="toggle('polygonPath')">{{ polygonPath.editing ? '停止绘制' : '开始绘制' }}</button>
    </bm-control>
    <bm-local-search :keyword="addressKeyword" :auto-viewport="true" style="display: none"></bm-local-search>
  </baidu-map>
</div>

第四步：data中添加属性

baiduMap:undefined,
polygon:undefined,
path: [],
polygonPath: {
  editing: false,
  paths: [] // 绘制完成后的经纬度，其实是在画的时候动态push的，因为在点击的时候触发了 paintPolygon 函数
},
pointBak:{},
addressKeyword:'',

第五步：编写方法

  /*百度地图*/
  //控制绘制地图开关
  toggle (name) {
    if(!this.polygon){
      this.addCovering();
    }
    if(this[name].editing){
      this.polygon.disableEditing();
    }else {
      this.polygon.enableEditing();
    }
        this[name].editing = !this[name].editing
        // 在这里做一步判断，如果有路径且开启绘制就把原来的路径清空
        if (this.path && this.polygonPath.editing) {
            this.path = []
          }
      },
  // 鼠标右键多边形绘制完成
  paintPolygon (e) {
    if (!this.polygonPath.editing) {
      return
    }
    this.path = this.polygon.getPath();
    this.path.push(e.point);
    this.polygon.setPath(this.path);
  },
  // 当编辑时触发 动态添加点
    updatePolygonPath (e) {
    console.log(e.target.getPath(),'eee',this.polygonPath.paths[0])
  },
 //获取当前位置，如果用户同意获取
  mapReady({BMap,map}){
    let geoLocation = new BMap.Geolocation();
    this.baiduMap = map;
    if(this.formCustom.id == null){
      geoLocation.getCurrentPosition((geolocationResult)=>{
        if(geolocationResult.point == null){
          this.pointBak = {lat:26.65332482,lng:106.63657676};
        }else{
          this.pointBak = geolocationResult.point;
        }
      });
    }else{
      this.pointBak = {lng:this.formCustom.lng,lat:this.formCustom.lat};
    }
    this.addCovering();
  },
  //添加覆盖物
  addCovering(){
//创建覆盖物实例polygon
    this.polygon = new BMap.Polygon();
    this.polygon.setStrokeColor("#999093");
    this.polygon.setFillColor("#20B2AA");
    this.polygon.setStrokeWeight(3);
    this.polygon.getFillOpacity(0.3);
    this.polygon.setStrokeStyle("dashed");
    let arrPath = [];
    if(this.path){
      this.path.forEach(item =>{
        arrPath.push(new BMap.Point(item.lng,item.lat));
      })
    }
    //set经纬度到地图
    this.polygon.setPath(arrPath);
    this.baiduMap.addOverlay(this.polygon);
  },
  /** 根据地址获取经纬度，这里是我有一个选择省市县的框，选择自动调整地图位置*/
  addCoutomMarkerProvince(point){
    this.pointBak = point;
    this.baiduMap.addOverlay(new BMap.Marker(point));
},addCoutomMarkerCity(point){
    this.pointBak = point;
    this.baiduMap.addOverlay(new BMap.Marker(point));
},addCoutomMarkerCounty(point){
    this.pointBak = point;
    this.baiduMap.addOverlay(new BMap.Marker(point));
},
  // 点击移动中心点 动态获取point
  dragend(e){
    this.pointBak = e.point;
  },

最终效果：