dvcp_v2_wxcp_app/src/apps/AppBuilding/components/searchMap.vue

<template>
  <div class="searchMap">
    <div class="grid-input">
      <!-- <img src="./img/search-icon.png" alt="" class="search-icon"> -->
      <img src="./img/back-icon.png" alt="" class="back-icon">
      <input type="text" class="input" placeholder="请输入姓名、房屋信息" />
      <img src="./img/del-icon.png" alt="" class="del-icon">
      <span class="search-btn">搜索</span>
    </div>
    <div class="search-list" v-if="show">
      <div class="title border">
        <img src="./img/search-icon.png" alt="" class="search-icon">李宁
      </div>
      <div class="item border">
        <img src="./img/user-icon.png" alt="" class="search-icon user-icon">
        <div class="item-content">
          <h3>李宁宁</h3>
          <p>武昌徐家棚街街道武汉绿地金融城西斯莱公馆A座22楼…</p>
        </div>
      </div>
    </div>
    <div class="build-btn" @click="toList()">
      <img src="./img/build-icon.png" alt=""> 楼栋<br/>列表
    </div>
    <div class="map-content">
      <AiTMap :areaId="areaId" :map.sync="map" :lib.sync="lib" :ops="ops" :libraries="['service', 'tools']"></AiTMap>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {

  data() {
    return {
      areaId: '',
      ops: {},
      lib: '',
      map: null,
      markerArr: [],
      show: false,
      value: ''
    }
  },
  computed: { ...mapState(['user']) },
  mounted() {
    this.areaId = this.user.areaId
    this.initMap()
  },

  methods: {
    initMap() { this.$nextTick(() =>{
        let {lib: TMap, map} = this
      var markerCluster = new TMap.MarkerCluster({
        id: 'cluster',
        map: map,
        enableDefaultStyle: true, // 启用默认样式
        minimumClusterSize: 1, // 形成聚合簇的最小个数
        geometries: [{ // 点数组
            position: new TMap.LatLng(39.953416, 116.480945)
          },
          {
            position: new TMap.LatLng(39.984104, 116.407503)
          },
          {
            position: new TMap.LatLng(39.908802, 116.497502)
          },
          {
            position: new TMap.LatLng(40.040417, 116.373514)
          },
          {
            position: new TMap.LatLng(39.953416, 116.380945)
          },
          {
            position: new TMap.LatLng(39.984104, 116.307503)
          },
          {
            position: new TMap.LatLng(39.908802, 116.397502)
          },
          {
            position: new TMap.LatLng(40.040417, 116.273514)
          },
        ],
        zoomOnClick: true, // 点击簇时放大至簇内点分离
        gridSize: 60, // 聚合算法的可聚合距离
        averageCenter: false, // 每个聚和簇的中心是否应该是聚类中所有标记的平均值
        maxZoom: 10 // 采用聚合策略的最大缩放级别
      });
    })
    },
    initMap2() {
      //初始化地图
      
      this.$nextTick(() =>{
        let {lib: TMap, map} = this
        var center = new TMap.LatLng(40.040422, 116.273521)
        var marker = null;
        var points = []
        map.setCenter(center)
        map.setZoom(18)

        marker = new TMap.MultiMarker({
          id: 'marker-layer', // 图层id
          map: map,
          styles: {
            // 点标注的相关样式
            marker: new TMap.MarkerStyle({
              width: 25,
              height: 35,
              anchor: { x: 16, y: 32 },
              src:'',
            }),
          },
          geometries: [
            {
              // 点标注数据数组
              id: 'demo',
              styleId: 'marker',
              position: new TMap.LatLng(40.040422, 116.273521),
            },
          ],
        });

        var infoWindow = null;
        var infoWindow2 = null
        var html = `<div style=" display: inline-block;padding: 6px 10px;line-height: 16px;border-radius: 24px; background: #5088FF;color: #fff;font-size: 12px;position: relative;">`
          +`腾讯大厦<span style=" width: 0;height: 0;border-left: 6px solid transparent;border-right: 6px solid transparent;border-top: 12px solid #5088FF;position: absolute;bottom: -12px;left: 50%;margin-left:-6px;"></span></div>`
        
        infoWindow = new TMap.InfoWindow(
          {
          map: map,
          enableCustom: true,
          position: new TMap.LatLng(40.040422, 116.273521),
          offset: { y: -70, x: -5 },
          content: html
          },
        );

        infoWindow2 = new TMap.InfoWindow(
          {
          map: map,
          enableCustom: true,
          position: new TMap.LatLng(40.03592, 116.27058),
          offset: { y: -70, x: -5 },
          content: html
          },
        );
      })
      
    },
    toList() {
      console.log(122)
      this.$emit('change', {
        type: 'List',
      })
    }
  }
}
</script>

<style lang="scss" scoped>
uni-page-body{
  height: 100%;
}
.searchMap {
  height: 100%;
  .grid-input{
    width: 720px;
    height: 88px;
    background: #FFF;
    box-shadow: 0px 4px 8px 0px rgba(192, 185, 185, 0.5);
    border-radius: 16px;
    position: fixed;
    top: 24px;
    left: 16px;
    z-index: 99;
    padding: 16px 20px;
    box-sizing: border-box;
    .search-icon{
      width: 48px;
      height: 48px;
      margin-right: 16px;
    }
    .input{
      display: inline-block;
      padding: 8px 0;
      height: 32px;
      line-height: 32px;
      width: 480px;
      font-size: 28px;
      font-family: MicrosoftYaHei;
      color: #666;
    }
    .back-icon{
      width: 16px;
      height: 32px;
      margin-right: 24px;
      vertical-align: super;
    }
    .del-icon{
      width: 32px;
      height: 32px;
      vertical-align: super;
      margin-right: 30px;
    }
    .search-btn{
      display: inline-block;
      width: 80px;
      height: 32px;
      line-height: 32px;
      text-align: right;
      font-size: 28px;
      font-family: MicrosoftYaHei;
      color: #1365DD;
      border-left: 1px solid #DEDFE0;
      vertical-align: top;
      margin-top: 12px;
    }
  }
  .search-list{
    position: fixed;
    width: 100%;
    top: 128px;
    left: 0;
    padding: 0 44px;
    box-sizing: border-box;
    background-color: #fff;
    z-index: 99;
    .search-icon{
      width: 36px;
      height: 36px;
      margin-right: 16px;
      vertical-align: sub;
    }
    .title{
      height: 82px;
      line-height: 82px;
      font-size: 26px;
      font-family: MicrosoftYaHeiSemibold;
      color: #1365DD;
    }
    .item{
      padding: 22px 0 24px 0;
    }
    .item-content{
      display: inline-block;
      width: 610px;
      color: #333;
      h3{
        font-size: 28px;
        font-family: MicrosoftYaHeiSemibold;
        line-height: 32px;
        margin-bottom: 8px;
      }
      p{
        width: 100%;
        font-size: 24px;
        font-family: MicrosoftYaHei;
        line-height: 32px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    .user-icon{
      vertical-align: top;
    }
    .border{
      border-bottom: 1px solid #DEDFE1;
    }
  }
  .build-btn{
    width: 80px;
    height: 160px;
    background: #FFF;
    box-shadow: 0px 4px 8px 0px rgba(138, 138, 138, 0.5);
    border-radius: 8px;
    position: fixed;
    bottom: 136px;
    right: 24px;
    z-index: 99999;
    padding: 16px 16px 0;
    box-sizing: border-box;
    font-size: 24px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #666;
    line-height: 30px;
    img{
      width: 48px;
      height: 48px;
      margin-bottom: 8px;
    }
  }
  .map-content{
    width: 100%;
    height: 100%;
  }
  .popup{
    padding: 0 32px 16px;
    .bg{
      width: 64px;
      height: 10px;
      background: #CCC;
      border-radius: 6px;
      margin: 32px 0 32px 344px;
    }
    .title{
      font-size: 36px;
      font-family: PingFang-SC-Heavy, PingFang-SC;
      font-weight: 800;
      color: #333;
      line-height: 50px;
      margin-bottom: 24px;
    }
    .info-flex{
      padding: 26px 0 30px 0;
      width: 100%;
      border-bottom: 1px solid #D8DDE6;
      line-height: 40px;
      font-size: 28px;
      .label{
        display: inline-block;
        width: 160px;
        font-weight: 800;
        color: #333;
      }
      .value{
        color: #666;
        font-size: 26px;
        .phone-icon{
          width: 40px;
          height: 40px;
          vertical-align: sub;
          margin-left: 16px;
        }
      }
    }
  }
}
</style>