patrol-wzgl-web/src/views/books/index.vue

<template>
  <div>
    <div class="map" id="map" :style="{'height':mapHeight+'px'}"></div>
    <div ref='infoWindow' id="infoWindow">
      <i @click='closeWin' class="el-icon-close"></i>
      <div v-for="item in openData">
        <template v-if="item.type=='teams'">
          <p>名称：<span>{{item.mingcheng}}</span></p>
          <p>队长：<span>{{item.duizhang?item.duizhang:''}}</span></p>
          <p>联系电话：<span>{{item.lianxidianhua?item.lianxidianhua:''}}</span></p>
          <p>人数：<span>{{item.renshu?item.renshu:''}}</span></p>
        </template>
        <template v-if="item.type=='storages'">
          <p>名称：<span>{{item.cangkumingcheng}}</span></p>
          <p>所在区域：<span>{{item.suozaiquyu?item.suozaiquyu:''}}</span></p>
          <p>建设年代：<span>{{item.jiansheniandai?item.jiansheniandai:''}}</span></p>
          <p>仓库面积：<span>{{item.cangkumianji?item.cangkumianji:''}}</span></p>
          <p>负责人：<span>{{item.fuzeren?item.fuzeren:''}}</span></p>
          <p>联系电话：<span>{{item.lianxidianhua?item.lianxidianhua:''}}</span></p>
        </template>

      </div>
    </div>
  </div>
</template>

<script>
  import {
    index,
    destroy
  } from "@/api/system/baseForm.js"
  export default {
    data() {
      return {
        zoom: 10,
        center: [120.585294, 31.299758],
        mapHeight: 0,
        map: null,
        makerList: [],
        infoWindow: null,
        openData: [],
        mapList:[]
      }
    },
    created() {
      this.initHeight()
      this.$nextTick(function() {
        this.mapInit()
      })
    },
    methods: {
      initHeight() {
        let winHeight = document.body.clientHeight
        this.mapHeight = winHeight - 50 - 20
      },
      mapInit() {
        this.map = new AMap.Map("map", {
          center: this.center,
          mapStyle: "amap://styles/bfb1bb3feb0db7082367abca96b8d214", // 设置地图的显示样式
          zoom: this.zoom
        });
        this.infoWindow = new AMap.InfoWindow({
          isCustom: true,
          autoMove: true,
          avoid: [20, 20, 20, 20],
          content: this.$refs.infoWindow,
          closeWhenClickMap: true,
          offset: new AMap.Pixel(-10, -10)
        })
        this.getTeams()
        this.getStorages()
        // this.setMapMarker()
      },
      async getTeams() {
        await index({
          page: 1,
          page_size: 9999,
          table_name: 'teams'
        }).then(res => {
          let markers = []
          if(res.data.length<1){
            return
          }
          res.data.map(item=>{
            this.mapList.push({
              type:'teams',
              name:item.mingcheng,
              ...item
            })
          })
                    this.setMapMarker()
          // this.mapList = res.data

        })
        // this.list = res.data

      },
      async getStorages() {
        await index({
          page: 1,
          page_size: 9999,
          table_name: 'flood_storages'
        }).then(res => {
          let markers = []
          if(res.data.length<1){
            return
          }
          res.data.map(item=>{
            this.mapList.push({
              type:'storages',
              name:item.cangkumingcheng,
              ...item
            })
          })
          this.setMapMarker()
        })
        // this.list = res.data
      },
      // 增加点位
      setMapMarker() {
        var that = this
        // that.map.remove(that.makerList)
        // that.makerList = []
        console.log("this.mapList",this.mapList)
        // let list = this.mapList.map((m) => {
        //   return {
        //     id: m.id, //数据id
        //     name: m.name, //数据名称
        //     // reside: m.reside,
        //     // lnglat: [m.lon, m.lat],//经纬度数据
        //     lnglat: [parseFloat(m.jingdu), m.weidu],
        //     style: 0, //渲染的样式下标，关联第一步创建的样式对象数组的数据
        //   };
        // });
        this.mapList.forEach((item, index) => {
          // 遍历生成多个标记点
          console.log("item",item)
          if (!item.jingdu || !item.weidu) {
            return
          }

          let marker = new AMap.Text({
            map: this.map,
            text: item.name,
            zIndex: 9999999,
            offset: new AMap.Pixel(-13, -30),
            position: [parseFloat(item.jingdu), parseFloat(item.weidu)],
            clickable: true,
            extData: item.id,
            style: {
              'border': item.type==='teams'?'1px solid red':'1px solid blue',
              'padding': '0px 5px'
            }
          })
            marker.on('click', (e) => {
              this.openData = []
              if (e.target.w.extData === item.id) {
                this.openData.push(item)
              }
              this.infoWindow.open(this.map, e.target.getPosition())
            }),
            this.makerList.push(marker)
        });
        console.log("this.makerList",this.makerList)
        this.map.add(this.makerList)
      },
      closeWin() {
        this.infoWindow.close()
      },
    },
  }
</script>

<style>
  #infoWindow {
    position: relative;
  }

  #infoWindow>div {
    background: #fff;
    border: 1px solid red;
    padding: 10px;
    width: 180px;
  }

  /deep/ #infoWindow .el-icon-close {
    position: absolute;
    top: 5px;
    right: 5px;
    cursor: pointer;
  }
</style>