sishitongtang-crm/src/views/customer/map.vue

<template>
  <div>
    <div>
      <div ref="lxHeader">
        <lx-header icon="md-apps" style="margin-bottom: 10px; border: 0px; margin-top: 15px" text="客户地图">
          <div slot="content"></div>

          <slot>
            <el-select v-model="selectArea" size="small" placeholder="请选择区域" @change="areaClick">
              <el-option v-for="item in areas" :key="item.id" value-key="id" :value="item" :label="item.value">
              </el-option>
            </el-select>
<!--            <Input placeholder="关键字搜索" v-model="selector.keyword" style="width: 200px; margin-right: 10px" />-->

<!--            <Button style="margin-left: 10px" type="primary" @click="selector.page = 1,getCustomers()">查询</Button>-->
          </slot>
        </lx-header>
      </div>
    </div>

    <el-amap vid="amapContainer" :amap-manager="amapManager"
             class="amap" :style="{'height':height+'px'}">
    </el-amap>

     <el-card v-show="isShowCard" :style="{'position':'fixed','left':cardDom.x+'px','top':cardDom.y+'px','z-index':99999}">
       <div v-if="select.info">
         <div>
           <span style="font-weight: 600;padding-right: 20px">{{ select.info.name }}</span>
           <span>{{ select.info.sex }}</span>
         </div>
         <div>
           <span v-if="select.info.level_type_detail" style="padding-right: 20px">{{ select.info.level_type_detail.value }}</span>
           <span v-if="select.info.level_detail">{{ select.info.level_detail.value }}</span>
         </div>
         <div>
           <i class="el-icon-phone" style="padding-right: 10px;"></i>
           {{ select.info.phone }}
         </div>
         <div>
           <i class="el-icon-location" style="padding-right: 10px;"></i>
           {{ select.info.city_detail ? select.info.city_detail.value : '' }} {{ select.info.area_detail ? select.info.area_detail.value : '' }} {{ select.info.street_detail ? select.info.street_detail.value : '' }}
           <div>
             {{ select.address }}
           </div>
         </div>
       </div>
     </el-card>
  </div>
</template>

<script>
import { getparameter } from '@/api/system/dictionary'
import { AMapManager,lazyAMapApiLoaderInstance } from 'vue-amap'
import { getList } from '@/api/customer'

const amapManager = new AMapManager()
export default {
  data() {
    return {
      selectArea:{},
      selector: {
        page: 1,
        page_size: 9999,
        keyword: '',
        area_id:''
      },
      height:0,
      amapManager,
      district:'',
      customers:[],
      markers:[],
      polygons:[],
      areas:[],

      isShowCard:false,
      select:'',
      cardDom:{x:0,y:0}
    }
  },
  methods: {
    async getAreas(){
      let res = await getparameter({number:'serveArea'})
      this.areas = res.detail
      console.log(this.areas)
    },

    async areaClick(e){
      console.log(e)
      if(e.value == '市本级'){
        this.selector.area_id = ''
      }else{
        this.selector.area_id = e.id
      }
      await this.getCustomers()
      this.draw()
    },

    initDistrict(){
      if(!this.district){
        let opts = {
          subdistrict: 0, //获取边界不需要返回下级行政区
          extensions: "all", //返回行政区边界坐标组等具体信息
          level: "district", //查询行政级别为 市
        }
        this.district = new AMap.DistrictSearch(opts)
      }
    },
    drawPolygon(district = '常州市'){
      this.district.search(district,(status,res) => {
        console.log(res,status)
        if(res.districtList){
          this.polygons = []
          let bounds = res.districtList[0].boundaries
          for(let i = 0,l = bounds.length; i < l; i++){
            let polygon = new AMap.Polygon({
              strokeWeight: 1,
              path: bounds[i],
              fillOpacity: 0.4,
              fillColor: "rgba(225,121,110,0.92)",
              strokeColor: "#a53227",
            })
            this.polygons.push(polygon)
          }
          this.map.add(this.polygons)
          this.map.setFitView(this.polygons)
        }
      })
    },

    initLoad() {
      let clientHeight = document.documentElement.clientHeight
      let lxHeader_height = 96.5; //查询 头部
      let paginationHeight = 37; //分页的高度
      let topHeight = 50; //页面 头部
      let tableHeight = clientHeight - lxHeader_height - topHeight - paginationHeight - 20 - 25;
      this.height = tableHeight ?? 600
    },

    async getCustomers(){
      let res = await getList(this.selector)
      this.customers = res.data.data.map(item => {
        let address = item.customer_address.filter(item => item.default === 1)[0] ? item.customer_address.filter(item => item.default === 1)[0] : item.customer_address[0]
        return {
          name:item.name,
          address:address?.address,
          lng:Number(address?.lng || 0),
          lat:Number(address?.lat || 0),
          info:item
        }
      })
      console.log(this.customers)
    },

    drawMarkers(){
      this.markers = []
      for(let i of this.customers){
        let marker = new AMap.Marker({
          draggable:false,
          cursor:'pointer',
          position:[i.lng,i.lat],
          icon:i.info.sex === '女' ?  require('../../assets/female.png') : require('../../assets/male.png'),
          label: {content:i.name,offset:new AMap.Pixel(0,30)},
          clickable:true,
        })
        marker.on('mouseover',(e) => {
          this.cardDom.x = e.originEvent.clientX
          this.cardDom.y = e.originEvent.clientY
          this.select = i
          this.isShowCard = true
        })
        marker.on('mouseout',e => {
          this.isShowCard = false
        })
        this.markers.push(marker)
        marker.setMap(this.map)
      }
    },

    draw(){
      this.map.remove(this.polygons)
      this.map.remove(this.markers)
      this.drawMarkers()
      this.drawPolygon(this.selectArea.remark || '常州市')
    },
  },

  async mounted() {
    await this.getCustomers()
    lazyAMapApiLoaderInstance.load().then(() => {
      this.map = new AMap.Map('amapContainer',{
        center:[Number(this.customers[0]?.lng || 119.58),Number(this.customers[0]?.lat || 31.47)]
      })
      this.initDistrict()
      this.draw()
    })
  },
  created() {
    this.initLoad()
    this.getAreas()
  }
}
</script>

<style scoped lang="scss">
::v-deep .amap-icon img{
  height: 24px;
}
::v-deep .el-card__body{
  padding: 10px !important;
}
::v-deep .ivu-modal-footer{
  border: none !important;
}
.amap{
  width: 100%;
}
</style>
<style>
.amap-marker-label{
  border-color: #B3241D !important;
}
</style>