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="4">
              <el-image :src="d.category.iconImage" style="height: 20px"/>
            </el-col>
            <el-col :span="14">
              {{ 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;
}

.marker span {
  color: #666666;
  margin-right: 10px;
  font-size: 12px
}
.marker p{
  font-size: 16px;
  margin: 5px 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 = []
      const listStyles = {}

      res.forEach((o) => {
        let infoContent = '<div style="text-align: left" class="marker">'
        infoContent += '<p><img src="' + o.litpic + '" width="200" height="150"/></p>'
        infoContent += '<p>' + (o.name ?? '-') + '</p>'
        infoContent += '<p><span>联系人</span>' + (o.contacts ?? '-') + '</p>'
        infoContent += '<p><span>电话</span>' + (o.contactNumber ?? '-') + '</p>'
        infoContent += '</div>'
        const styleKey = 'myStyle' + o.category.id
        listGeometries.push({
          'id': o.id,
          'styleId': styleKey,
          'position': new TMap.LatLng(o.lat, o.lng),
          'properties': {
            'infoContent': infoContent
          }
        })
        listStyles[styleKey] = new TMap.MarkerStyle({
          'width': 50,
          'height': 60, // 点标记样式高度（像素）
          'src': o.category.iconImage,
          'anchor': { x: 16, y: 32 }
        })
      })
      console.log(listStyles)
      this.markerLayer.setStyles(listStyles)
      this.markerLayer.setGeometries(listGeometries)
    }
  }
}
</script>