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.reside}}</span></p>
        <p class="showInfo" @click="showInfo(item.id)">查看详情</p>
      </div>
    </div>
  </div>

</template>
<script>
  // 建议将zoom,center等可配置的项均写在配置文件中，方便打包之后进行修改。
  import {
    index
  } from "@/api/system/baseForm.js"
  export default {
    data() {
      return {
        zoom: 11,
        center: [119.597897,31.723247],
        mapHeight: 0,
        map: null,
        infoWindow: null,
        openData: [],
        // markerList: [],
        mapList: []
      }
    },
    mounted() {
      this.initHeight()
      this.$nextTick(function() {
        this.mapInit()
      })
      this.getindex()
    },
    methods: {
      async initHeight() {
        let winHeight = document.body.clientHeight
        this.mapHeight = winHeight - 50 - 20
      },
      // 初始化地图，并加载行政区域
      async  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.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() {

        console.log("mapList",this.mapList)
        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.longitude,item.latitude],
            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)
        // 自动适应显示想显示的范围区域
      },
      closeWin() {
        this.infoWindow.close()
      },
      showInfo(id) {
        this.$router.push({path:"/record/personinfo",query:{id:id}})
      },
      async getindex() {
        let res = await index({
          page_size: 99999,
          page: 1,
          table_name: 'records',
        })
        let _data = []
        for(var k of res.data){
          if(k.longitude&&k.latitude){
            _data.push(k)
          }
        }
        this.mapList = _data
        this.setMapMarker()
        var geocoder = null
        let that = this
        // AMap.plugin("AMap.Geocoder",function(){
        //   geocoder = new AMap.Geocoder({
        //       city: '常州市' // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
        //   })
        //   let _data = []
        //   for(var k of res.data){
        //     if(k.longitude==null||k.latitude==null){
        //       console.log(k.name)
        //       let m = k
        //       let _reside = k.reside
        //       console.log(_reside)
        //       geocoder.getLocation(_reside, function(status, result) {
        //         console.log(_reside)
        //           if (status === 'complete' && result.info === 'OK') {
        //             // result中对应详细地理坐标信息

        //             m.longitude = result.geocodes[0].location.lng
        //             m.latitude = result.geocodes[0].location.lat
        //             console.log("m",m)
        //             _data.push(m)
        //             console.log("_data",_data)
        //             return
        //           }
        //         })
        //     }else{
        //       console.log("---",k.name)
        //       _data.push(k)
        //     }

        //   }

        //   that.mapList = _data
        //           // that.setMapMarker()
        // })


      },



    }

  }
</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>