<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密鑰"></script>

<script src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密鑰"></script>

<link  rel="external nofollow"  rel="stylesheet">
<script type="text/javascript" src="http://mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.js"></script>

<div class="map-body" :id="mapId"></div>

.map-body {
  position: relative;
  height: 500px;
  border: 1px solid #dcdfe6;
}

createMap(lgt, lat) {
      // this.maploading=true;
      this.map = new BMapGL.Map(this.mapId, { enableMapClick: false }) // 創(chuàng)建Map實(shí)例,GL版命名空間為BMapGL(鼠標(biāo)右鍵控制傾斜角度)
      this.map.centerAndZoom(new BMapGL.Point(lgt, lat), 11)      // 初始化地圖,設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別
      this.map.enableScrollWheelZoom(true)// 開(kāi)啟鼠標(biāo)滾輪縮放
    },

  data() {
    return {
    map: "",
    mapId: "", //我這里采用了動(dòng)態(tài)id這個(gè)不是必須的，看自己需求來(lái)
    }

    created() {
        this.mapId = 'map' + new Date().getTime();
     }

    const point = new BMapGL.Point(116.404, 39.915);

    created() {
        this.mapId = 'map' + new Date().getTime();
        const point = new BMapGL.Point(116.404, 39.915);
        //創(chuàng)建地圖
        this.$nextTick(() => {
          this.createMap(point.lng, point.lat);
        })
      },

   <ul class="drawing-panel">
     <li class="bmap-btn bmap-marker" @click="draw('marker')"
       :style="{ 'background-position-y': actNav === 'marker' ? '-52px' : '0px' }"></li>
     <li class="bmap-btn bmap-polyline" @click="draw('polyline')"
       :style="{ 'background-position-y': actNav === 'polyline' ? '-52px' : '0px' }"></li>
     <li class="bmap-btn bmap-rectangle" @click="draw('rectangle')"
       :style="{ 'background-position-y': actNav === 'rectangle' ? '-52px' : '0px' }"></li>
     <li class="bmap-btn bmap-polygon" @click="draw('polygon')"
       :style="{ 'background-position-y': actNav === 'polygon' ? '-52px' : '0px' }"></li>
     <li class="bmap-btn bmap-circle" @click="draw('circle')"
       :style="{ 'background-position-y': actNav === 'circle' ? '-52px' : '0px' }"></li>
   </ul>

.drawing-panel {
  z-index: 999;
  position: absolute;
  top: 14rem;
  margin-left: 2.5rem;
  padding-left: 0;
  border-radius: .25rem;
  height: 47px;
  box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
}
.bmap-btn {
  border-right: 1px solid #d2d2d2;
  float: left;
  width: 64px;
  height: 100%;
  background-image: url(//api.map.baidu.com/library/DrawingManager/1.4/src/bg_drawing_tool.png);
  cursor: pointer;
}
.drawing-panel .bmap-marker {
  background-position: -65px 0;
}
.drawing-panel .bmap-polyline {
  background-position: -195px 0;
}
.drawing-panel .bmap-rectangle {
  background-position: -325px 0;
}
.drawing-panel .bmap-polygon {
  background-position: -260px 0;
}
.drawing-panel .bmap-circle {
  background-position: -130px 0;
}

    draw(drawingType) {
      console.log(drawingType, '666')
      this.actNav = drawingType
      /**這里看需求可以把它設(shè)置為全局變量。
      *我這里需求需要，故設(shè)置了全局變量，以下代碼就注釋掉了*/
      // const styleOptions = {
      //   strokeColor: '#5E87DB',   // 邊線(xiàn)顏色
      //   fillColor: '#5E87DB',     // 填充顏色。當(dāng)參數(shù)為空時(shí)，圓形沒(méi)有填充顏色
      //   strokeWeight: 2,          // 邊線(xiàn)寬度，以像素為單位
      //   strokeOpacity: 1,         // 邊線(xiàn)透明度，取值范圍0-1
      //   fillOpacity: 0.2          // 填充透明度，取值范圍0-1
      // };
      // const labelOptions = {
      //   borderRadius: '2px',
      //   background: '#FFFBCC',
      //   border: '1px solid #E1E1E1',
      //   color: '#703A04',
      //   fontSize: '12px',
      //   letterSpacing: '0',
      //   padding: '5px'
      // };
      // 實(shí)例化鼠標(biāo)繪制工具
      const drawingManager = new BMapGLLib.DrawingManager(this.map, {
        //isOpen: true,        // 是否開(kāi)啟繪制模式
        enableCalculate: false, // 繪制是否進(jìn)行測(cè)距測(cè)面
        enableSorption: true, // 是否開(kāi)啟邊界吸附功能
        sorptiondistance: 20, // 邊界吸附距離
        circleOptions: this.styleOptions, // 圓的樣式
        polylineOptions: this.styleOptions, // 線(xiàn)的樣式
        polygonOptions: this.styleOptions, // 多邊形的樣式
        rectangleOptions: this.styleOptions, // 矩形的樣式
        labelOptions: this.labelOptions,  // label樣式
      })
      // 進(jìn)行繪制
      if (drawingManager._isOpen && drawingManager.getDrawingMode() === drawingType) {
        drawingManager.close();
      } else {
        drawingManager.setDrawingMode(drawingType);
        drawingManager.open();
      }
      /** 我這里需求是圓形和矩形還有點(diǎn)的標(biāo)注，
      *還有兩種就沒(méi)有寫(xiě)它的監(jiān)聽(tīng)事件，也是差不多的，
      *可以對(duì)照一下官方api和我寫(xiě)的就基本上差不多了，
      *如果有誰(shuí)需要，我有時(shí)間也可以繼續(xù)把剩下兩種監(jiān)聽(tīng)事件補(bǔ)上 */
      // 監(jiān)聽(tīng)事件
      if (drawingType == 'rectangle') {
        // 監(jiān)聽(tīng)矩形繪制完成事件
        drawingManager.addEventListener("overlaycomplete", (e) => {
          // 獲取矩形對(duì)象
          const rectangle = e.overlay;
          // 獲取矩形的四個(gè)頂點(diǎn)
          const points = rectangle.getPath();
          console.log(points, "頂點(diǎn)");
          this.scope_point = points;
        });
      } else if (drawingType == 'circle') {
        // 監(jiān)聽(tīng)圓形繪制完成事件
        drawingManager.addEventListener("overlaycomplete", (e) => {
          // 獲取圓形對(duì)象
          const circle = e.overlay;
          // 獲取圓形的圓心
          const center = circle.getCenter();
          console.log(center, "圓心");
          // 獲取圓形的半徑
          const radius = circle.getRadius();
          console.log(radius, "半徑");
          this.scope_point = center;
          this.scope_radius = radius;
        });
      } else if (drawingType == 'marker') {
        drawingManager.addEventListener("overlaycomplete", (e) => {
          // 獲取標(biāo)注對(duì)象
          const marker = e.overlay;
          // 獲取標(biāo)注的經(jīng)緯度坐標(biāo)
          this.point = marker.getPosition();
          // 創(chuàng)建地理編碼服務(wù)實(shí)例
          const geocoder = new BMapGL.Geocoder();
          // 將經(jīng)緯度坐標(biāo)解析為地址信息
          geocoder.getLocation(this.point, (result) => {
            this.newForm.address = result.address;
            console.log(this.point, result.address, "地址");
          });
        });
      }
    },

 this.map = new BMap.Map(this.mapId, { enableMapClick: false });
 this.map.centerAndZoom(new BMap.Point(point_location[1], point_location[0]), 11)      // 初始化地圖,設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別我這里的point_location是后臺(tái)返回的坐標(biāo)，跟上面的類(lèi)似
 this.map.enableScrollWheelZoom(true)// 開(kāi)啟鼠標(biāo)滾輪縮放

// 創(chuàng)建標(biāo)記點(diǎn)的坐標(biāo)
const point = new BMap.Point(point_location[1], point_location[0]);//point_location后臺(tái)返回字段
console.log(point, "坐標(biāo)")
// 創(chuàng)建標(biāo)記點(diǎn)對(duì)象
const marker = new BMap.Marker(point);
// 將標(biāo)記點(diǎn)添加到地圖上
this.map.addOverlay(marker);

// 創(chuàng)建矩形框?qū)ο?
 const rectangle = new BMap.Polygon([
   new BMap.Point(this.rectangle[3], this.rectangle[2]), //rectangle后臺(tái)返回的坐標(biāo)
   new BMap.Point(this.rectangle[5], this.rectangle[4]),
   new BMap.Point(this.rectangle[7], this.rectangle[6]),
   new BMap.Point(this.rectangle[9], this.rectangle[8]),
 ], this.styleOptions); //styleOptions之前的全局變量
 // 將矩形框添加到地圖上
 this.map.addOverlay(rectangle);
 // 設(shè)置地圖視野，使得矩形框完全顯示在地圖視野內(nèi)
 this.map.setViewport(rectangle.getPath());

 // 創(chuàng)建圓心坐標(biāo)
 const center = new BMap.Point(this.rectangle[1], this.rectangle[0]);//rectangle后臺(tái)返回的圓形坐標(biāo)
 // 創(chuàng)建圓形標(biāo)注對(duì)象
 const circle = new BMap.Circle(center, this.scope_radius, this.styleOptions);
 // 將圓形標(biāo)注添加到地圖上
 this.map.addOverlay(circle);