jintan-canlian-web/src/views/record/map.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.name}}</span></p>
        <p>现居住地：<span>{{item.address}}dlkfijfdf;ld</span></p>
        <p class="showInfo" @click="showInfo(item.id)">查看详情</p>
      </div>
    </div>
  </div>

</template>
<script>
  // 建议将zoom,center等可配置的项均写在配置文件中，方便打包之后进行修改。
  export default {
    data() {
      return {
        zoom: 13,
        center: [119.431911, 31.678932],
        mapHeight: 0,
        map: null,
        infoWindow: null,
        openData: [],
        // markerList: [],
        mapList: [{
          id: 1,
          name: '小王',
          address: '广东省广州市海珠区',
          lnglats: [119.655114, 31.726251]
        }, {
          id: 2,
          name: '小张',
          address: '广东省广州市黄埔区',
          lnglats: [119.471972, 31.578163]
        }]
      }
    },
    mounted() {
      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
        });
        // 行政区域加载
        let that = this
        let adcode = ['320413'];
        this.areaBG(this.map, adcode);
        this.setMapMarker()
        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, -40)
        })
      },
      // 加载金坛区
      areaBG(map, adcode) {
        AMap.service('AMap.DistrictSearch', function() {
          let opts = {
            subdistrict: 1, // 返回下一级行政区
            extensions: 'all', // 返回行政区边界坐标组等具体信息
            level: 'city', // 查询行政级别为市
            // adcode:'320413'
          };
          // 实例化DistrictSearch
          let district = new AMap.DistrictSearch(opts);
          district.setLevel('district');
          // 行政区查询
          district.search(`${adcode}`, function(status, result) {
            // 获取边界信息
            let bounds = result.districtList[0].boundaries;
            let polygons = [];
            if (bounds) {
              for (let i = 0, l = bounds.length; i < l; i++) {
                // 生成行政区划polygon
                let polygon = new AMap.Polygon({
                  map: map,
                  strokeWeight: 1,
                  path: bounds[i],
                  fillOpacity: 0.2,
                  fillColor: 'rgba(71,228,194,1)',
                  strokeColor: '#147d38'
                });
                polygons.push(polygon);
              }
            }
          });
        });
      },
      // 增加信息窗口
      setMapMarker() {
        let makerList = []
        //自定义信息窗体
        this.mapList.forEach((item) => {
          // 遍历生成多个标记点
          let marker = new AMap.Text({
            map: this.map,
            text: item.name,
            zIndex: 9999999,
            offset: new AMap.Pixel(-13, -30),
            position: item.lnglats,
            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())
            }),
            makerList.push(marker)
        });
        this.map.add(makerList)
        // 自动适应显示想显示的范围区域
        this.map.setFitView();
        this.map.setZoom(11)

      },
      closeWin() {
        this.infoWindow.close()
      },
      showInfo(id) {

      }



    }

  }
</script>
<style scoped>
  #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;
  }

  .showInfo {
    text-align: center;
    cursor: pointer;
    color: #147d38;
  }

</style>