vue引入百度地圖 地圖控件和繪圖工具（電子圍欄）

一、參考文檔
1、官方文檔：http://lbsyun.baidu.com/index.php?title=jspopular/guide/show
2、百度地圖JavaScript API v2.0類參考：（方法很細）
http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html#a6b0

二、代碼：

1、HTML代碼

<template>
  <div class="cp-page">
    <el-form size="mini" :inline="true">
      <el-form-item>
        <el-button @click="clearAll">重置</el-button>
      </el-form-item>
      <div class="input_list">
        <span style="padding-right: 30px">圓半徑(m)：<input v-model="Math.floor(radius)"/></span>
        <span style="padding-right: 30px">圓面積(m²)：<input v-model="Math.floor(circleArea)"/> (m²)</span>
        <span >多邊形面積(m²)：<input v-model="Math.floor(polygonArea)"/> </span>
      </div>
    </el-form>
    <div id="bmap-box"></div>
  </div>
</template>

2、JS代碼
引入百度地圖鏈接和祕鑰
3、JS代碼

  import '@/assets/js/bmap/DrawingManager_min.js'
  import '@/assets/js/bmap/DrawingManager_min.css'
  export default {
		data(){
		      return{
		        mapObj: null, //地圖
		        drawingManager:null, //鼠標繪圖工具
		        overlays:[],//清除底層圖案
		        show:false,
		
		        circle:null,//圓形
		        radius:'', //半徑
		        circlecenter:[],//圓心座標
		        circleArea:'', //面積
		
		        polygon:null, //多邊形
		        polygonPath:[],//獲取多邊形點座標
		        polygonArea:'', //面積
		
		      }
     },
     created(){
      this.loadBMapScript();
    },
    mounted(){
      this.initMap();
      //初始化加載繪圖工具
      window. () => {
        this.showDraw()
      }
    },
    methods:{
      //加載在線文件
      loadBMapScript () {
        let script = document.createElement('script');
        script.src = 'http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js';
        document.body.appendChild(script);

        let link = document.createElement('link');
        link.rel = 'stylesheet';
        link.href = 'http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css';
        document.body.appendChild(link);
      },
      //初始化地圖
      initMap: function () {
        let self = this;
        let map = utils.bmap.initMap('bmap-box');
        // 創建點座標
        let point = new BMap.Point(116.404, 39.915);
        map.centerAndZoom(point, 15);
        //開啓鼠標滾輪縮放
        map.enableScrollWheelZoom(true);
        //魚骨圖
        map.addControl(new BMap.NavigationControl());
        //創建信息窗口
        //let infoWindow = new BMap.InfoWindow();
        //map.openInfoWindow(infoWindow);
        //添加地圖類型控件（右上角）
        map.addControl(new BMap.MapTypeControl({
          mapTypes:[
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
          ]})
        );
        self.mapObj = map;
      },
      //顯示繪製工具
      showDraw(){
        let self = this;
        self.show=true;
        self.clearAll();
        //畫圖樣式
        let styleOptions = {
          strokeColor:"#f00",    //邊線顏色。
          fillColor:"#fff",      //填充顏色。當參數爲空時，圓形將沒有填充效果。
          strokeWeight: 1,       //邊線的寬度，以像素爲單位。
          strokeOpacity: 1,	   //邊線透明度，取值範圍0 - 1。
          fillOpacity: 0.85,      //填充的透明度，取值範圍0 - 1。
          strokeStyle: 'solid' //邊線的樣式，solid或dashed。
        };
        //生成鼠標繪製工具
        self.drawingManager = new BMapLib.DrawingManager(self.mapObj , {
          isOpen: false,
          enableDrawingTool:true, //是否顯示工具欄
          drawingToolOptions: {
            anchor: BMAP_ANCHOR_TOP_RIGHT,
            offset: new BMap.Size(5, 50),
            /*drawingModes:[
              BMAP_DRAWING_POLYGON,
              BMAP_DRAWING_CIRCLE
            ]*/
          },
          //圖形默認樣式
          circleOptions: styleOptions,
          polylineOptions: styleOptions,
          polygonOptions: styleOptions,
          rectangleOptions: styleOptions
        });
        //判斷圖案類型
        let overlaycomplete = function(e){
          //清除底層圖案
          self.mapObj.clearOverlays();
           //判斷畫圖的類型
          if(e.drawingMode=='circle'){
            self.clearData();
            self.radius=e.overlay.getRadius();//圓半徑
            self.circlecenter=e.overlay.getCenter(); //圓心座標
            self.circleArea = 3.14*(self.radius*self.radius)
            self.drawingManager.close();
            //增加圓
            self.circle = new BMap.Circle(self.circlecenter,self.radius,
              {strokeColor:"red", strokeWeight:1, strokeOpacity:0.85});
            self.mapObj.clearOverlays();
            self.mapObj.addOverlay(self.circle);
            //編輯圓
            self.circle.enableEditing();
            self.circle.addEventListener("lineupdate",function(e){
              self.circlecenter=e.target.point; //圓心
              self.radius=e.target.ya; //半徑
              self.circleArea = 3.14*(self.radius*self.radius); //面積
            });
          }else if(e.drawingMode=='polygon'||e.drawingMode=='rectangle'){
              //畫多邊形
              self.clearData();
              self.polygonPath=e.overlay.getPath(); //獲取多邊形路徑點
              self.drawingManager.close();
              self.mapObj.clearOverlays();
              //增加多邊形，
              self.polygon = new BMap.Polygon(self.polygonPath,
                {strokeColor:"red", strokeWeight:1, strokeOpacity:0.85});
              self.mapObj.clearOverlays();
              self.mapObj.addOverlay(self.polygon);
              //編輯多邊形
              self.polygon.enableEditing();
              self.polygon.addEventListener("lineupdate",function(e){
                self.polygonArea = ""; //面積
                //alert(e.target.Nc[0].tb.lng);
                console.log(e.target.Nc[0].tb.lng)
              });
          }else if(e.drawingMode=='marker'){
            //顯示mark點
            self.clearData();
            self.drawingManager.close();
            self.mapObj.clearOverlays();
            let point=e.overlay.point;
            let marker = new BMap.Marker(point);// 創建標註
            self.mapObj.clearOverlays();
            self.mapObj.addOverlay(marker);
            marker.enableDragging();
          }else if(e.drawingMode=='polyline'){
            self.clearData();
            self.drawingManager.close();
            self.mapObj.clearOverlays();
            let polyPath = e.overlay.getPath();
            let polyline= new BMap.Polyline(polyPath,{strokeColor:"red", strokeWeight:1, strokeOpacity:0.85})
            self.mapObj.clearOverlays();
            self.mapObj.addOverlay(polyline);
            polyline.enableEditing()
          }
        };
        //監聽畫圖方法
        self.drawingManager.addEventListener('overlaycomplete', overlaycomplete);
      },
      //清空座標點
      clearData(){
        let self=this;
        self.radius=''; //半徑
        self.circleArea='';
        self.polygonArea="";
      },
      //重置方法
      clearAll(){
        let self=this;
        self.clearData();
        self.mapObj.clearOverlays();
        for(let i = 0; i < self.overlays.length; i++){
          self.mapObj.clearOverlays(self.overlays[i]);
        }
        self.overlays.length = 0;
      },

    }

}
  

三、注意事項
1、初始化鼠標繪製工具，一直報錯，這段代碼放在mounted(){}方法裏，就好了（這個問題解決了兩天）

window. () => {
        this.showDraw()
}；

2、需要注意的是drawingToolOptions可選參數裏面的drawingModes，工具欄上可以選擇出現的繪製模式,將需要顯示的DrawingType以數組型形式傳入，如[BMAP_DRAWING_MARKER, BMAP_DRAWING_CIRCLE] 將只顯示畫點和畫圓的選項，總共有以下五個常量，可根據自己情況選擇是否添加顯示
BMAP_DRAWING_MARKER 畫點
BMAP_DRAWING_CIRCLE 畫圓
BMAP_DRAWING_POLYLINE 畫線
BMAP_DRAWING_POLYGON 畫多邊形
BMAP_DRAWING_RECTANGLE 畫矩形

//生成鼠標繪製工具
        self.drawingManager = new BMapLib.DrawingManager(self.mapObj , {
          isOpen: false,
          enableDrawingTool:true, //是否顯示工具欄
          drawingToolOptions: {
            anchor: BMAP_ANCHOR_TOP_RIGHT,
            offset: new BMap.Size(5, 50),
            // 在這裏配置你需要的畫圖工具
            /*drawingModes:[   
              BMAP_DRAWING_POLYGON,
              BMAP_DRAWING_CIRCLE
            ]*/
          },
          //圖形默認樣式
          circleOptions: styleOptions,
          polylineOptions: styleOptions,
          polygonOptions: styleOptions,
          rectangleOptions: styleOptions
        });

3、加載外聯的js和css，需要把這兩個文件下載到本地，兩種方式都加上

import '@/assets/js/bmap/DrawingManager_min.js'
 import '@/assets/js/bmap/DrawingManager_min.css'
loadBMapScript () {
  let script = document.createElement('script');
  script.src = 'http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js';
  document.body.appendChild(script);
	
	let link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = 'http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css';
    document.body.appendChild(link);
},

4、畫圓形
首先、清除地圖上的圖形；在添加

self.mapObj.clearOverlays();
self.mapObj.addOverlay(self.circle);

獲取圓心座標和半徑（e.overlay.getRadius()）

self.radius=e.overlay.getRadius();//圓半徑
self.circlecenter=e.overlay.getCenter(); //圓心座標
self.circleArea = 3.14*(self.radius*self.radius) //圓的面積
self.drawingManager.close(); //關閉繪圖工具

編輯圓

//編輯圓
     self.circle.enableEditing();  // 開啓圓形編輯器
     self.circle.addEventListener("lineupdate",function(e){   //監聽編輯圓形的事件
       self.circlecenter=e.target.point; //圓心
       self.radius=e.target.ya; //半徑
       self.circleArea = 3.14*(self.radius*self.radius); //面積
     });

其他類型的編輯工具，類似方法，同上，一定要多看文檔。