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>
<!--            <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.address }}
         </div>
       </div>
     </el-card>
  </div>
</template>

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

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

      isShowCard:false,
      select:'',
      cardDom:{x:0,y:0}
    }
  },
  methods: {
    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)
    },

    markers(){
      for(let i of this.customers){
        let marker = new AMap.Marker({
          draggable:false,
          cursor:'pointer',
          position:[i.lng,i.lat],
          icon:require('../../assets/customer.png'),
          label: {content:i.name,offset:new AMap.Pixel(0,34)},
          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
        })
        marker.setMap(this.map)
      }
    }
  },
  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.markers()
    })
  },
  created() {
    this.initLoad()
  }
}
</script>

<style scoped lang="scss">
::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>