<baidu-map
          :center="center"
          :zoom="zoom"
          :scroll-wheel-zoom="true"
          @ready="handler"
          @click="mapClick"
          style="width:85%;height: 300px;margin-left:50px;"
          :map-click="false"
          @mousemove="syncPolygon"
          @rightclick="newPolygon"
        >
          <bm-polygon
            :path="path"
            v-for="path of polygonPath.paths"
            :key="path.toString()"
            stroke-color="#529aff"
            fill-color="#dfebff"
            :fill-opacity="0.8"
            :stroke-opacity="0.5"
            :stroke-weight="2"
            @click="alertpath"
          />
        </baidu-map>

import { BaiduMap, BmNavigation, BmView, BmGeolocation, BmCityList } from 'vue-baidu-map'
export default {
  name: 'AddGridPersonnel',
  components: {
    BaiduMap,
    BmNavigation,
    BmView,
    BmGeolocation,
    BmCityList
  },
  data () {
    return {
      // 地图信息
      center: {
        lng: 114.037548,
        lat: 22.616857
      },
      zoom: 18,
      locData: {
        longitude: '114.037548',
        latitude: '22.616857',
        address: ''
      },
      polygonPath: {
        editing: false,
        paths: [] // 绘制完成后的经纬度，其实是在画的时候动态push的，因为在点击的时候触发了 paintPolygon 函数
      }
    }
  },
  // 方法
  methods: {
    // 开启多边形绘制
    toggle (name) {
      this[name].editing = !this[name].editing
      // 在这里做一步判断，如果有路径且开启绘制就把原来的路径清空
      if (this.polygonPath.paths && this.polygonPath.editing) {
        this.polygonPath.paths = []
      }
    },
    // 鼠标移动时
    syncPolygon (e) {
      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([])
      }
    },
    // 鼠标右键多边形绘制完成
    paintPolygon (e) {
      if (!this.polygonPath.editing) {
        return
      }
      const { paths } = this.polygonPath
      !paths.length && paths.push([])
      paths[paths.length - 1].push(e.point)
    },
    alertpath (e) {
      console.log(e.currentTarget.so)
      console.log(this.polygonPath.paths[0])
    },
    handler ({ BMap, map }) {
      console.info('BMap  ', BMap)
      window.map = map
      this.addMarker(this.center.lng, this.center.lat)
    },
    // 点击地图
    mapClick (e) {
      console.log('绘制', this.polygonPath.editing)
      if (this.polygonPath.editing) {
        this.paintPolygon(e)
      } else {
        this.clickEvent(e)
      }
    },
    // 点击地图监听
    clickEvent (e) {
      this.addMarker(e.point.lng, e.point.lat)
      // 用所定位的经纬度查找所在地省市街道等信息
      var point = new window.BMap.Point(e.point.lng, e.point.lat)
      var gc = new window.BMap.Geocoder()
      const _this = this
      gc.getLocation(point, function (rs) {
        // var addComp = rs.addressComponents
        console.log(rs.address) // 地址信息
        _this.locData.address = rs.address
        _this.form.setFieldsValue({
          longitude: e.point.lng,
          latitude: e.point.lat,
          address: rs.address
        })
      })
      this.locData.longitude = e.point.lng
      this.locData.latitude = e.point.lat
    },
    addMarker (lng, lat) {
      this.$nextTick(() => {
        console.log('addMarker', lng, lat)
        if (window.map) {
          window.map.clearOverlays()
          console.log('window.map', window.map)
          const iconDemo = new window.BMap.Icon(
            require('@/assets/icons/marker_red_sprite.png'),
            new window.BMap.Size(64, 64),
            { anchor: new window.BMap.Size(18, 32), imageSize: new window.BMap.Size(36, 36) }
          )
          var myMarker = new window.BMap.Marker(new window.BMap.Point(lng, lat), { icon: iconDemo })
          console.log('window.map', window.map)
          window.map.addOverlay(myMarker)
          console.log('window.map', window.map)
        }
      })
    },  }
}