<template>
  <div class="mapMain">
    <el-input v-model="addressKeyword" v-on:input='getSearchCon()' class="searchInput"
              placeholder="请输入地址来直接查找相关位置"></el-input>
    <el-row
      :gutter="20"
      style="padding: 20px 0; margin: 20px 0; border: 1px solid #ccc; border-radius: 4px"
    >
      <el-col :span="3">
        <el-input placeholder="查询" v-model="address"></el-input>
      </el-col>
      <el-col :span="21">
        <el-button type="primary" @click="toggle('polygonPath')"
        >{{ polygonPath.editing ? '重新绘制' : '开始绘制' }}
        </el-button>
        <el-button type="primary" @click="polygonPath.editing=true">编辑</el-button>
        <el-button type="primary" @click="save">保存</el-button>
      </el-col>
    </el-row>
    <baidu-map :map-click="false"
               @click="drawLine" class="bmView" :scroll-wheel-zoom="true" @ready="handler" :center="center"
               style="height:1080px"
               :zoom="zoom" ak="http://17.22.40.34:8219/baidumap/jsapi/api.js">
      <!--比例尺控件-->
      <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
      <!--缩放控件-->
      <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation>

      <bm-view style="width: 100%; height:1080px; flex: 1"></bm-view>
    
  <!---引入bm-polygon 才能绘制图形-->
      <bm-polygon
        :path="path"
        v-for="path of polygonPath.paths"
        :key="path.toString()"
        stroke-color="blue"
        fill-color="red"
        :fill-opacity="0.1"
        :stroke-opacity="0.5"
        :stroke-weight="2"
        :editing="polygonPath.editing"
        @lineupdate="updatePolygonPath"
      ></bm-polygon>
      <bm-marker
        v-for="(item, index) in polygonPath.paths[0]"
        :position="item"
        :key="index"
        :dragging="false"

      ></bm-marker>


      <bm-local-search :keyword="addressKeyword" :auto-viewport="true" style="display: none"></bm-local-search>

    </baidu-map>
  
    </div>
    <el-dialog title="" align="left" width="80%" :visible.sync="innerVisible">
      <desinfo @handleDialogClose="handleDialogClose" :desinfoPageParam='desinfoPageParam' ref='infoPage'></desinfo>
    </el-dialog>
  </div>
</template>
<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import BmView from 'vue-baidu-map/components/map/MapView.vue'
import BmLocalSearch from 'vue-baidu-map/components/search/LocalSearch.vue'

import BmScale from 'vue-baidu-map/components/controls/Scale'
import BmNavigation from 'vue-baidu-map/components/controls/Navigation'
import BmMarkerClusterer from 'vue-baidu-map/components/extra/MarkerClusterer'
import BmMarker from 'vue-baidu-map/components/overlays/Marker'
import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow'
import desinfo from './Desinfo'
import BmPolygon from "vue-baidu-map/components/overlays/Polygon";

export default {
  name: 'TestBaiDu',
  components: {
    BaiduMap,
    BmView,
    BmLocalSearch,
    BmScale,
    BmNavigation,
    BmMarkerClusterer,
    BmMarker,
    BmInfoWindow,
    desinfo,
    BmPolygon
  },
  data() {
    return {
      address: '',
      polygonPath: {
        editing: false,
        paths: [[{"lng": 117.354751, "lat": 39.054754}, {"lng": 117.442138, "lat": 39.052065}, {
          "lng": 117.37976,
          "lat": 39.002959
        }]] // 绘制完成后的经纬度，其实是在画的时候动态push的，因为在点击的时候触发了 paintPolygon 函数
      },
      innerVisible: false,
      desinfoPageParam: {
        id: '',
        name: ''
      },
      lngLatArr2: [{
        longitude: 117.023621,
        latitude: 39.374409,
        name: '测试一'
      }, {
        longitude: 117.307892,
        latitude: 39.704835,
        name: '测试二'
      }, {
        longitude: 21.494243,
        latitude: 26.299542,
        name: '测试三'
      }],
      lngLatArr: [{
        longitude: 117.225495,
        latitude: 39.087195,
        name: '测试一'
      }, {
        longitude: 117.515259,
        latitude: 38.931397,
        name: '测试二'
      }],
      isHide: false, // 是否显示标签内容
      staticimg: './static/ld_ld.png',
   
        }
      ],
 
      addressKeyword: '',
      center: {
        lng: 109.45744048529967,
        lat: 36.49771311230842
      },
      zoom: 16,
      districtLoading: 0,
      blist: [],
      infoWindow: {
        lng: 0,
        lat: 0,
        show: false,
        info: {
          air: 0,
          area: 12313,
          areaEnergy: 0.64,
          code: "440300A055",
          energy: 7922.66,
          lat: "32.043433",
          lng: "118.784107",
          name: "市人民检察院",
          water: 0
        },
      },
    }
  },
  mounted: function () {



  },
  methods: {
    handler({
              BMap,
              map
            }) {
      var point = new BMap.Point(117.225495, 39.087195)
      map.centerAndZoom(point, 8); // 将point点放入map中，展示在页面中心展示，10=缩放程度
      map.enableScrollWheelZoom(); // 开启滚动鼠标滑轮


    },
 
    // 开启多边形绘制
    toggle(name) {
      this[name].editing = !this[name].editing;
      // 在这里做一步判断，如果有路径且开启绘制就把原来的路径清空
      if (this.polygonPath.paths) {
        this.polygonPath.paths = [];
      }
    },
    // 鼠标左键键多边形绘制
    drawLine(e) {
      if (!this.polygonPath.editing) {
        return;
      }
      const {paths} = this.polygonPath;
      !paths.length && paths.push([]);
      paths[0].push(e.point);
    },

    // 修改拖拽坐标
    updatePolygonPath(e) {
      this.polygonPath.paths[0] = e.target.getPath();
    },
    // 鼠标移动时
    syncPolygon(e) {
      // this.polygonPath.editing = true
      if (!this.polygonPath.editing) {
        return
      }
      const {paths} = this.polygonPath
      if (!paths.length) {
        return
      }
      const path = paths[paths.length - 1]
      if (!path.length) {
        return
      }
      if (path.length === 1) {
        path.push(e.point)
      }
      this.$set(path, path.length - 1, e.point)
    },
    // 鼠标左键点击时往路径里push一个点
    newPolygon(e) {
      if (!this.polygonPath.editing) {
        return
      }
      // 当开始绘制后把按钮调回开始绘制状态，防止绘制多个图形
      this['polygonPath'].editing = !this['polygonPath'].editing
      const {paths} = this.polygonPath
      if (!paths.length) {
        paths.push([])
      }
      const path = paths[paths.length - 1]
      path.pop()
      if (path.length) {
        paths.push([])
      }
    },
    // 鼠标右键多边形绘制完成
    // 保存
    save() {
      console.log(JSON.stringify(this.polygonPath.paths))
      //debugger
      if (!this.polygonPath.editing) {
        return;
      }
      // 当开始绘制后把按钮调回开始绘制状态，防止绘制多个图形
      this["polygonPath"].editing = !this["polygonPath"].editing;
      const {paths} = this.polygonPath;
      if (!paths.length) {
        paths.push([]);
      }
      if (paths[0].length > 2) { // 3个点才能成区域
        // 保存处理相关坐标和请求接口
        var str = JSON.stringify(this.polygonPath.paths[0]);
        var params = JSON.stringify({
          name: "123",
          area: str
        });
        console.warn(params, 99999);
      }
    },
  }
}
</script>
<style scoped lang="less" type="text/less">
  .mapMain {
    .searchInput.el-input {
      position: absolute;
      top: 13px;
      z-index: 10;
      left: 16px;
      width: 350px;
    }
    .rightNav {
      z-index: 8;
      position: absolute;
      right: 0px;
      width: 150px;
      height: 300px;
      top: 50px;
      ul {
        li {
          background: #333333;
          opacity: 0.7;
          color: #000000;
          background-color: rgba(0, 0, 0, 0.86);
          box-shadow: 1px 1px 5px #888888;
          color: #FFFFFF;
          line-height: 40px;
          position: relative;
          margin: 5px 0px;
          border-radius: 5px;
          width: 137px;
          text-align: center;
          cursor: pointer;
          img {
            position: absolute;
            left: 8px;
            top: 9px;
          }
        }
        li:hover {
          background: #333333;
          opacity: 0.9;
        }
      }
      .laberCon {
        width: 300px;
        background: #fff;
        position: absolute;
        right: 10px;
        height: 400px;
        top: 0px;
        .labelTitle {
          background: #ccc;
          padding: 6px;
        }
        .listMain {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-around;
          .listCon {
            display: flex;
            line-height: 28px;
            font-size: 14px;
            margin: 5px auto;
            img {
              width: 26px;
              height: 26px;
            }
          }
        }
      }
    }

  }

</style>

最终的效果