open-platform-admin-ui/src/views/place/gis/index.vue

<template>
  <div class="app-container">
    <tencent-map id="amapcontainer" :height="900" :enable-click="false" :enable-bounds-changed="true" @boundsChanged="boundsChanged" />
    <div class="category">
      <el-card>
        <a v-for="d in listData" :key="d.category.id" href="javascript:;" @click="changeDataType(d.category.id)">
          <el-row>
            <el-col :span="18">
              {{ d.category.name }}
            </el-col>
            <el-col :span="6">
              {{ d.num }}
            </el-col>
          </el-row>
        </a>
      </el-card>
    </div>
  </div>
</template>
<style type="text/css">
.category {
  position: absolute;
  top: 80px;
  left: 30px;
  width: 200px;
  z-index: 9999;
}

.category a {
  display: block;
  padding: 10px 0;
}
</style>

<script>
import { findByGroupByDataType, findByMapBounds } from '@/api/place/base_info'
import TencentMap from '@/components/TencentMap'

export default {
  components: { TencentMap },
  data() {
    return {
      listData: [],
      categoryId: null,
      northEast: null,
      southWest: null,
      markerLayer: null
    }
  },
  created() {
  },
  mounted() {
    findByGroupByDataType().then(v => {
      console.log(v)
      this.listData = v
    })
  },
  methods: {
    changeDataType: function(categoryId) {
      this.categoryId = categoryId
      this.findData()
    },
    boundsChanged: function(northEast, southWest, markerLayer) {
      this.northEast = northEast
      this.southWest = southWest
      this.markerLayer = markerLayer
      this.findData()
    },
    findData() {
      const _this = this
      findByMapBounds(_this.northEast.lng, _this.northEast.lat, _this.southWest.lng, _this.southWest.lat, _this.categoryId)
        .then((res) => _this.setMarker(res))
        .finally(() => (_this.isloading = false))
    },
    setMarker: function(res) {
      const listGeometries = []
      res.forEach((o) => {
        let infoContent = '<div style="text-align: left">'
        infoContent += '<p>名称：' + (o.name ?? '-') + '</p>'
        infoContent += '<p>联系人：' + (o.contacts ?? '-') + '</p>'
        infoContent += '<p>电话：' + (o.contactNumber ?? '-') + '</p>'
        infoContent += '</div>'
        listGeometries.push({
          position: new TMap.LatLng(o.lat, o.lng),
          properties: {
            infoContent: infoContent
          }
        })
      })
      this.markerLayer.setGeometries(listGeometries)
    }
  }
}
</script>