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">
        <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>
      </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()
        console.log("map", this.map)
      },
      getTeams() {
        index({
          page: 1,
          page_size: 9999,
          table_name: 'teams'
        }).then(res => {
          let markers = []
          if(res.data.length<1){
            return
          }
          this.mapList = res.data
          this.setMapMarker()
        })
        // this.list = res.data

      },
      // 增加点位
      setMapMarker() {
        var that = this
        // console.log("123",m.jingdu, m.weidu)
        // console.log('456',gcj02towgs84(m.jingdu, m.weidu))
        that.map.remove(that.makerList)
        that.makerList = []
        // this.map.clearMap();
        let list = this.mapList.map((m) => {
          return {
            id: m.id, //数据id
            name: m.mingcheng, //数据名称
            // reside: m.reside,
            // lnglat: [m.lon, m.lat],//经纬度数据
            lnglat: [m.jingdu, m.weidu], //这里我是转化一下，数据返回的是84坐标系需要转成高德坐标系否则会有偏差
            style: 0, //渲染的样式下标，关联第一步创建的样式对象数组的数据
          };
        });
        this.mapList.forEach((item, index) => {
          // 遍历生成多个标记点
          if (!item.jingdu || !item.weidu) {

            return
          }
          let marker = new AMap.Text({
            map: this.map,
            text: item.mingcheng,
            zIndex: 9999999,
            offset: new AMap.Pixel(-13, -30),
            position: [item.jingdu, item.weidu],
            clickable: true,
            extData: item.id,
            style: {
              'border': '1px solid red',
              '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)
        });
        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>