vue-amap生成地图遮罩层、点标记和弹窗

<template>
  <div style="  position: relative;">
    <div class="head-container">
      <div style="text-align: center;margin-top: 10px;font-size: 18px;padding-bottom: 20px">
        地区选择
      </div>
      <el-tree
        :data="deptOptions"
        :props="defaultProps"
        :expand-on-click-node="false"
        :filter-node-method="filterNode"
        ref="tree"
        @node-click="handleNodeClick"
      />
    </div>
    <div class="mapContainer">
      <div class="amap-page-container" v-bind:style="{height: heightData}">
        <el-amap vid="amapDemo" :center="center" :zoom="zoom" class="amap-demo" ref="map">
          <el-amap-polygon
            strokeColor="#4ea8f8"
            strokeOpacity="0.8"
            fillColor="#c9ebf7"
            fillOpacity="0.5"
            v-for="(polygon, index) in polygons"
            :key="index"
            strokeWeight="1"
            :path="polygon.De.path"
          ></el-amap-polygon>
          <el-amap-marker
            v-for="marker in markers"
            :position="marker.position"
            :key="marker.id"
            :events="marker.events"
            :icon="marker.icon"
          ></el-amap-marker>
          <el-amap-info-window
            v-if="window"
            :position="window.position"
            :visible="window.visible"
            :content="window.content"
            :offset="window.offset"
          ></el-amap-info-window>
        </el-amap>
      </div>
    </div>

  </div>
</template>

<script>
import {
  getAddressgisselect,
  getEquipinfo
} from '@/api/hegezheng/shebeigsi'
import location from '../../../assets/images/hongji.png'
export default {
  data() {
    return {
      heightData: '850px',
      zoom: 7,
      center: [117.244694, 36.517344],
      window: '',
      windows:[],
      polygons: [],

      district: null,
      deviceList: undefined,
      postData: {},
      markers: [],          //标记
      defaultProps: {
        children: 'children',
        label: 'text'
      },
      //地址树选择
      addressId: '山东省',
      // 部门树选项
      deptOptions: undefined,
      // 部门名称
      deptName: undefined
    }
  },
  created() {
    this.getTreeselect()

    this.getDevice(this.postData)
  },
  mounted: function() {
    setTimeout(() => {
      this.drawBounds()
    }, 200)
  },
  methods: {
    /** 查询省市区下拉树结构 */
    getTreeselect() {
      getAddressgisselect().then(response => {
        this.deptOptions = response.data
      })
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    // 节点单击事件
    handleNodeClick(data) {
      console.log(data, 'data')
      this.addressId = data.text
      this.postData.address_id = data.id
      this.getDevice({ address_id:data.id })
      setTimeout(() => {
        this.drawBounds()
      }, 200)
    },
    /** 查询指定行政区域内的设备 **/
    getDevice(data) {
      getEquipinfo(data).then(response => {
        this.markers = response.data
        this.point(response.data)
      })
    },
    /** 地图 **/
    drawBounds() {
      var that = this

      //加载行政区划插件
      if (!that.district) {
        //实例化DistrictSearch
        var opts = {
          subdistrict: 0, //获取边界不需要返回下级行政区
          extensions: 'all', //返回行政区边界坐标组等具体信息
          level: 'city' //查询行政级别为 市
        }
        that.district = new AMap.DistrictSearch(opts)
      }
      //行政区查询
      let code = this.addressId + ''
      // let code = that.listDate.city + ''
      that.district.search(code, function(status, result) {
        that.polygons = []
        var bounds = result.districtList[0].boundaries
        if (bounds) {
          for (var i = 0, l = bounds.length; i < l; i++) {
            //生成行政区划polygon
            var polygon = new AMap.Polygon({
              strokeWeight: 1,
              path: bounds[i],
              fillOpacity: 0.4,
              fillColor: '#80d8ff',
              strokeColor: '#0091ea'
            })
            that.polygons.push(polygon)
          }
        }
        AMap.Polygon.bind(that.polygons)
        that.$refs.map.$amap.setFitView(that.polygons) //视口自适应
      })
    },
    // 地图点标记和地图窗体
    point(data){
      //自定义map点坐标图标
      let markers = [];
      let windows=[];
      let that=this;
      let pointMarker= data
      pointMarker.forEach((item,index)=>{
        markers.push({
          position: [item.longitude,item.latitude],
          icon:location, //不设置默认蓝色水滴
          events: {
            click() {
              that.windows.forEach(window => {
                window.visible = false; //关闭窗体
              });
              that.window = that.windows[index];
              that.$nextTick(() => {
                that.window.visible = true;//点击点坐标，出现信息窗体
              });
            }
          }
        })
        windows.push({
          position: [item.longitude,item.latitude],
          content:"" +
            "<div>"+"设备名称："+item.name+"</div>" +
            "<div>"+"设备管理员："+item.guanliyuan+"</div>" +
            "<div>"+"地 址："+item.addressname+"</div>" +
            "<div>"+"设备号："+"<span style='color: #66A0FF'>"+item.device_sn+"</span>"+"</div>"+
            "<div>"+"设备开具张数："+"<span style='color: #66A0FF'>"+item.totalNum+"</span>"+"</div>"
          ,
          offset:[5,-15],//窗体偏移
          visible: false//初始是否显示
        })
      })
      //添加点标注
      this.markers = markers;
      //生成弹窗
      this.windows=windows
    },
  }
}
</script>

<style scoped>
.head-container {
  position: absolute;
  z-index: 10;
  width: 200px;
  min-height: 500px;
  background: #FFFFFF;
  margin-left: 30px;
  margin-top: 50px;
  padding-left: 10px;
}
</style>