地图问题修复

src/apps/AppBuilding/components/list.vue

@@ -10,7 +10,7 @@
           <p class="address">{{item.createAddress}}</p>
           <span class="status" :class="'color'+item.locationStatus">{{$dict.getLabel('BuildLocationStatus', item.locationStatus)}}</span>
         </div>
-        <div class="item-btn" v-if="item.locationStatus != 1" @click="toMap(item.communityId, item.areaId)">
+        <div class="item-btn" v-if="item.locationStatus != 1" @click="toMap(item.id, item.areaId)">
           <span>去定位</span>
         </div>
       </div>
@@ -68,7 +68,7 @@ export default {
         params: {id, areaId}
       })
     }
-    
+
   },
   onReachBottom() {
     this.current++;
@@ -85,7 +85,7 @@ export default {
     .item{
       width: 100%;
       background: #FFF;
-      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.02);
+      box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.02);
       border-radius: 8px;
       box-sizing: border-box;
       position: relative;
@@ -159,4 +159,4 @@ export default {
     }
   }
 }
-</style>
+</style>

src/apps/AppBuilding/components/map.vue

@@ -4,7 +4,7 @@
       <img src="./img/model-icon.png" alt="" @click="toDetail"> 楼栋<br/>模型
     </div>
     <div class="map-content">
-      <AiTMap :areaId="areaId" :map.sync="map" :lib.sync="lib" :ops="ops" :libraries="['service', 'tools']"></AiTMap>
+      <AiTMap :areaId="user.areaId" :map.sync="map" :lib.sync="lib" :ops="ops" :libraries="['service', 'tools']"></AiTMap>
     </div>
     <div class="footer">
       <div class="click" @click="isFlag=true">点击定位</div>
@@ -48,54 +48,62 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import {mapState} from 'vuex'
+
 export default {
   props: ['params'],
   data() {
     return {
-      areaId: '',
       ops: {},
-      lib: '',
+      lib: null,
       map: null,
       markerLayer: '',
       isFlag: false,
       latLng: {lat: '', lng: ''},
+      retryTimes: 0
     }
   },
-  computed: { ...mapState(['user']) },
+  computed: {...mapState(['user'])},
   mounted() {
-    this.areaId = this.params.areaId
     this.initMap()
   },
 
   methods: {
     initMap() {  //初始化地图
-      this.$nextTick(() =>{
-        let {lib: TMap, map} = this
-        map.on("click", (evt) => {
-          if( this.markerLayer) {
-            this.markerLayer.setMap(null);
-          }
-         
-          this.markerLayer = new TMap.MultiMarker({
-            id: 'marker-layer',
-            map: map
-          });
-          if(this.isFlag) {
-            this.markerLayer.add({
-              position: evt.latLng
-            }); 
-            this.latLng = {
-              lat: evt.latLng.lat,
-              lng: evt.latLng.lng
+      this.$nextTick(() => {
+        let {lib: TMap, map, retryTimes} = this
+        if (map) {
+          map.on("click", (evt) => {
+            if (this.markerLayer) {
+              this.markerLayer.setMap(null);
             }
-          }
-                               
-        });
+
+            this.markerLayer = new TMap.MultiMarker({
+              id: 'marker-layer',
+              map: map
+            });
+            if (this.isFlag) {
+              this.markerLayer.add({
+                position: evt.latLng
+              });
+              this.latLng = {
+                lat: evt.latLng.lat,
+                lng: evt.latLng.lng
+              }
+            }
+
+          });
+        } else {
+          if (retryTimes < 5)
+            setTimeout(() => {
+              this.retryTimes++
+              this.initMap()
+            }, 1000)
+        }
       })
     },
     confirm() {
-      if(!this.latLng.lat) {
+      if (!this.latLng.lat) {
         return this.$u.toast(`未获取到定位信息，无法定位`)
       }
 
@@ -122,22 +130,24 @@ export default {
         params: this.params
       })
     }
-    
+
   }
 }
 </script>
 
 <style lang="scss" scoped>
-uni-page-body{
+uni-page-body {
   height: 100%;
 }
+
 .map {
   height: 100%;
-  .build-btn{
+
+  .build-btn {
     width: 80px;
     height: 160px;
     background: #FFF;
-    box-shadow: 0px 4px 8px 0px rgba(138, 138, 138, 0.5);
+    box-shadow: 0 4px 8px 0 rgba(138, 138, 138, 0.5);
     border-radius: 8px;
     position: fixed;
     bottom: 136px;
@@ -150,17 +160,20 @@ uni-page-body{
     font-weight: 500;
     color: #666;
     line-height: 30px;
-    img{
+
+    img {
       width: 48px;
       height: 48px;
       margin-bottom: 8px;
     }
   }
-  .map-content{
+
+  .map-content {
     width: 100%;
     height: 100%;
   }
-  .footer{
+
+  .footer {
     width: 100%;
     position: fixed;
     bottom: 0;
@@ -173,16 +186,18 @@ uni-page-body{
     height: 112px;
     line-height: 112px;
     text-align: center;
-    .click{
+
+    .click {
       flex: 1;
       color: #333;
       background-color: #fff;
     }
-    .btn{
+
+    .btn {
       flex: 2;
       background: #1365DD;
       color: #FFF;
     }
   }
 }
-</style>
+</style>

src/apps/AppBuilding/components/searchMap.vue

@@ -7,18 +7,18 @@
       <div class="clear-btn">
         <img src="./img/del-icon.png" alt="" class="del-icon" v-if="name" @click="clear">
       </div>
-      
+
       <span class="search-btn" @click="search">搜索</span>
     </div>
     <div class="search-list" v-if="show" @click="show=false">
       <div class="title border">
-        <img src="./img/search-icon.png" alt="" class="search-icon">{{name}}
+        <img src="./img/search-icon.png" alt="" class="search-icon">{{ name }}
       </div>
       <div class="item border" v-for="(item, index) in buildList" :key="index" @click.stop="getBuidInfo(item)">
         <img src="./img/user-icon.png" alt="" class="search-icon user-icon">
         <div class="item-content">
-          <h3>{{item.residentName}}</h3>
-          <p>{{item.areaName || ''}}{{item.createAddress}}</p>
+          <h3>{{ item.residentName }}</h3>
+          <p>{{ item.areaName || '' }}{{ item.createAddress }}</p>
         </div>
       </div>
     </div>
@@ -26,24 +26,24 @@
       <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>
+      <AiTMap :areaId="areaId" :map.sync="map" :lib.sync="lib" :ops="ops" :libraries="['service', 'tools']"/>
     </div>
     <u-popup v-model="showPop" mode="bottom" border-radius="14">
-      <div class="popup" >
+      <div class="popup">
         <div class="bg"></div>
-        <div class="title">{{detailInfo.house.createAddress || ''}}</div>
-        <p class="address">{{detailInfo.build.createAddress || ''}}</p>
+        <div class="title">{{ detailInfo.house.createAddress || '' }}</div>
+        <p class="address">{{ detailInfo.build.createAddress || '' }}</p>
         <div class="info-flex">
           <span class="label">所属社区</span>
-          <span class="value">{{detailInfo.build.areaName}}</span>
+          <span class="value">{{ detailInfo.build.areaName }}</span>
         </div>
         <div class="info-flex">
           <span class="label">所属小区</span>
-          <span class="value">{{detailInfo.build.communityName}}</span>
+          <span class="value">{{ detailInfo.build.communityName }}</span>
         </div>
         <div class="info-flex">
           <span class="label">房屋类型</span>
-          <span class="value">{{$dict.getLabel('communityBuildingType', detailInfo.house.buildingType)}}</span>
+          <span class="value">{{ $dict.getLabel('communityBuildingType', detailInfo.house.buildingType) }}</span>
         </div>
         <div class="info-flex">
           <span class="label">所属网格</span>
@@ -55,8 +55,12 @@
         </div>
         <div class="info-flex">
           <span class="label">楼栋长</span>
-          <span class="value">{{detailInfo.build.managerName || ''}}&nbsp;&nbsp;{{detailInfo.build.managerPhone || ''}}
-            <img :src="$cdn + 'common/phone.png'" alt="" @click="callPhone(detailInfo.build.managerPhone)" class="phone-icon" v-if="detailInfo.build.managerPhone">
+          <span
+              class="value">{{ detailInfo.build.managerName || '' }}&nbsp;&nbsp;{{
+              detailInfo.build.managerPhone || ''
+            }}
+            <img :src="$cdn + 'common/phone.png'" alt="" @click="callPhone(detailInfo.build.managerPhone)"
+                 class="phone-icon" v-if="detailInfo.build.managerPhone">
           </span>
         </div>
       </div>
@@ -66,15 +70,16 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
-export default {
+import {mapState} from 'vuex'
 
+
+export default {
   data() {
     return {
       latLngCenter: {},
       areaId: '',
       ops: {},
-      lib: '',
+      lib: null,
       map: null,
       markerArr: [],
       show: false,
@@ -86,298 +91,162 @@ export default {
         house: {},
         build: {}
       },
-      showPop: false
+      showPop: false,
+      retryMapCount: 0
     }
   },
-  computed: { ...mapState(['user']) },
+  computed: {...mapState(['user'])},
   mounted() {
     this.areaId = this.user.areaId
-    this.getCenterLatLng()
+    // Promise.all([this.getCenterLatLng(),this.getCommunityList()])
+    this.getCenterLatLng().then(points => {
+      this.getMarkerCluster(points)
+    })
+  },
+  created() {
+    this.$dict.load("communityBuildingType")
   },
-
   methods: {
-    initMap() { 
-      this.$nextTick(() =>{
-        let {lib: TMap, map} = this
-
-        
-
-        var ClusterBubbleClick;
-
-        this.ClusterBubble = function (options)  {
-          TMap.DOMOverlay.call(this, options)
-        }
-
-        // this.ClusterBubble.prototype = new TMap.DOMOverlay();
-
-        // this.ClusterBubble.prototype.onInit = function (options) {
-        //   this.content = options.content;
-        //   this.position = options.position;
-        // }
-
-        // 创建点聚合
-        var markerCluster = new TMap.MarkerCluster({
-          id: 'cluster',
-          map: map,
-          enableDefaultStyle: false, // 关闭默认样式
-          minimumClusterSize: 3,
-          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
-        });
-
-        var clusterBubbleList = [];
-        var markerGeometries = [];
-        var marker = null;
-
-        // 监听聚合簇变化
-        markerCluster.on('cluster_changed', function (e) {
-          // 销毁旧聚合簇生成的覆盖物
-          if (clusterBubbleList.length) {
-            clusterBubbleList.forEach(function (item) {
-              item.destroy();
-            })
-            clusterBubbleList = [];
-          }
-          markerGeometries = [];
-
-          // 根据新的聚合簇数组生成新的覆盖物和点标记图层
-          var clusters = markerCluster.getClusters();
-          clusters.forEach(function (item) {
-            if (item.geometries.length > 1) {
-              let clusterBubble = new this.ClusterBubble({
-                map,
-                position: item.center,
-                content: item.geometries.length,
-              });
-              clusterBubble.on('click', () => {
-                map.fitBounds(item.bounds);
-              });
-              clusterBubbleList.push(clusterBubble);
-            } else {
-              markerGeometries.push({
-                position: item.center
-              });
-            }
-          });
-
-          if (marker) {
-            // 已创建过点标记图层，直接更新数据
-            marker.setGeometries(markerGeometries);
-          } else {
-            // 创建点标记图层
-            console.log(markerGeometries)
-            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),
-                },
-              ],
-            });
-
-            markerGeometries.map((item, index) => {
-              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;">`
-                +`腾讯大厦${index}<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>`
-              
-              new TMap.InfoWindow(
-                {
-                map: map,
-                enableCustom: true,
-                position: new TMap.LatLng(item.position.lat, item.position.lng),
-                offset: { y: -70, x: -5 },
-                content: html
-                },
-              );
-            })
-            
-
-          }
-        });
-
-      })
-    },
-
-    
-  // // 以下代码为基于DOMOverlay实现聚合点气泡
-  // function ClusterBubble(options) {
-  //   TMap.DOMOverlay.call(this, options);
-  // }
-
-  // ClusterBubble.prototype = new TMap.DOMOverlay();
-
-  // ClusterBubble.prototype.onInit = function (options) {
-  //   this.content = options.content;
-  //   this.position = options.position;
-  // };
-  
-  // // 销毁时需要删除监听器
-  // ClusterBubble.prototype.onDestroy = function() {
-  // 	this.dom.removeEventListener('click', this.onClick);
-  //   this.removeAllListeners();
-  // };
-
-  // ClusterBubble.prototype.onClick = function() {
-  //   this.emit('click');
-  // };
-
-  // // 创建气泡DOM元素
-  // ClusterBubble.prototype.createDOM = function () {
-  //   var dom = document.createElement('div');
-  //   dom.classList.add('clusterBubble');
-  //   dom.innerText = this.content;
-  //   dom.style.cssText = [
-  //     'width: ' + (40 + parseInt(this.content) * 2) + 'px;',
-  //     'height: ' + (40 + parseInt(this.content) * 2) + 'px;',
-  //     'line-height: ' + (40 + parseInt(this.content) * 2) + 'px;',
-  //   ].join(' ');
-      
-  //   // 监听点击事件，实现zoomOnClick
-  //   this.onClick = this.onClick.bind(this);
-  //   // pc端注册click事件，移动端注册touchend事件
-  //   dom.addEventListener('click', this.onClick);
-  //   return dom;
-  // };
-
-  // ClusterBubble.prototype.updateDOM = function () {
-  //   if (!this.map) {
-  //     return;
-  //   }
-  //   // 经纬度坐标转容器像素坐标
-  //   let pixel = this.map.projectToContainer(this.position);
-
-  //   // 使文本框中心点对齐经纬度坐标点
-  //   let left = pixel.getX() - this.dom.clientWidth / 2 + 'px';
-  //   let top = pixel.getY() - this.dom.clientHeight / 2 + 'px';
-  //   this.dom.style.transform = `translate(${left}, ${top})`;
-
-  //   this.emit('dom_updated');
-  // };
-
-  // window.ClusterBubble = ClusterBubble;
-
     getCenterLatLng() {
-      this.$http.post(`/app/appdvcpconfig/getCorpLocation`, ).then(res => {
-        if (res.code == 0) {
+      return this.$http.post(`/app/appdvcpconfig/getCorpLocation`).then(res => {
+        if (res?.data) {
           this.latLngCenter = res.data
-          this.getCommunityList()
+          return this.getCommunityList()
         }
       })
     },
     getCommunityList() {
-      this.$http.post('/app/appcommunitybuildinginfo/listByBuilding', null, {
+      return this.$http.post('/app/appcommunitybuildinginfo/listByBuilding', null, {
         params: {
           current: 1,
           size: 1000000,
           areaId: this.user.areaId
         }
       }).then(res => {
-        if (res.code === 0) {
+        if (res?.data) {
           this.buildList = res.data
-          const points = res.data.map(item => {
+          return res.data.map(item => {
             return {
+              ...item,
               lnglat: [item.lng, item.lat],
-              id: item.id,
-              corpId: item.corpId,
-              areaName:item.areaName,
               buildingNumber: item.name || item.buildingNumber,
-              communityName:item.name || item.communityName,
+              communityName: item.name || item.communityName,
             }
           })
-
-          this.addMakert(points)
         }
       })
     },
-    addMakert(points) {
-      this.$nextTick(() =>{
-        let {lib: TMap, map} = this
-        var center = new TMap.LatLng(this.latLngCenter.lat, this.latLngCenter.lng)
-        map.setCenter(center)
-        var marker = null;
-        map.setZoom(18)
-
-        var geometriesList = []
-        points.map((item) => {
-          item.position = new TMap.LatLng(item.lnglat[1], item.lnglat[0])
-          var info = {
-            id: item.id,
-            styleId: 'marker',
-            position: new TMap.LatLng(item.lnglat[1], item.lnglat[0])
+    getMarkerCluster(points) {
+      let {lib: TMap, map, retryMapCount} = this
+      if (map) {
+        map.setCenter(this.latLngCenter)
+        let MarkerCluster = new TMap.MarkerCluster({
+          map, gridSize: 60,
+          enableDefaultStyle: false, // 关闭默认样式
+          geometries: points?.map(e => ({
+            position: new TMap.LatLng(e.lat, e.lng),
+            content: `${e.createAddress} | ${e.houseNum}`
+          })) || [],
+          zoomOnClick: true
+        })
+        let geometries = [], marker, markers = []
+        MarkerCluster.on('cluster_changed', () => {
+          if (markers.length) {
+            markers.forEach(function (item) {
+              item.destroy();
+            })
+            markers = [];
+          }
+          geometries = []
+          let clusters = MarkerCluster.getClusters()
+          clusters.forEach((item) => {
+            if (item.geometries.length > 1) {
+              //聚合样式
+              geometries.push({
+                styleId: 'cluster',
+                position: item.center,
+                content: item.geometries.length.toString() || "0"
+              })
+            } else {
+              //点标记样式
+              // 以下代码为基于DOMOverlay实现聚合点气泡
+              function ClusterBubble(options) {
+                TMap.DOMOverlay.call(this, options);
+              }
+              ClusterBubble.prototype = new TMap.DOMOverlay();
+              ClusterBubble.prototype.onInit = function (options) {
+                this.content = options.content;
+                this.position = options.position;
+              };
+              // 销毁时需要删除监听器
+              ClusterBubble.prototype.onDestroy = function () {
+                this.dom.removeEventListener('click', this.onClick);
+                this.removeAllListeners();
+              };
+              ClusterBubble.prototype.onClick = function () {
+                this.emit('click');
+              };
+              // 创建气泡DOM元素
+              ClusterBubble.prototype.createDOM = function () {
+                var dom = document.createElement('div');
+                dom.classList.add('marker');
+                dom.innerText = this.content;
+
+                // 监听点击事件，实现zoomOnClick
+                this.onClick = this.onClick.bind(this);
+                // pc端注册click事件，移动端注册touchend事件
+                dom.addEventListener('click', this.onClick);
+                return dom;
+              };
+              ClusterBubble.prototype.updateDOM = function () {
+                if (!this.map) {
+                  return;
+                }
+                // 经纬度坐标转容器像素坐标
+                let pixel = this.map.projectToContainer(this.position);
+
+                // 使文本框中心点对齐经纬度坐标点
+                let left = pixel.getX() - this.dom.clientWidth / 2 + 'px';
+                let top = pixel.getY() - this.dom.clientHeight / 2 + 'px';
+                this.dom.style.transform = `translate(${left}, ${top})`;
+                this.emit('dom_updated');
+              };
+              let {content} = item.geometries?.[0] || {},
+                  overlay = new ClusterBubble({map, position: item.center, content})
+              overlay.on('click', () => {
+                map.fitBounds(item.bounds);
+              })
+              markers.push(overlay)
+            }
+          });
+          if (marker) {
+            marker.setGeometries(geometries)
+          } else {
+            marker = new TMap.MultiMarker({
+              map, enableCollision: true, geometries,
+              styles: {
+                cluster: new TMap.MarkerStyle({
+                  width: 48,
+                  height: 48,
+                  anchor: {x: 24, y: 24},
+                  src: this.$cdn + "/map/cluster.png",
+                  color: '#fff',
+                  // direction: 'center',
+                  size: 18
+                })
+              },
+            })
           }
-          geometriesList.push(info)
         })
-        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: geometriesList,
-        });
-
-        points.map((item) => {
-
-          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;">`
-            +`${item.communityName}${item.buildingNumber}栋<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>`
-          
-          new TMap.InfoWindow(
-            {
-            map: map,
-            enableCustom: true,
-            position: item.position,
-            offset: { y: -70, x: -5 },
-            content: html
-            },
-          );
-
-        })
-        
-      })
+        return Promise.resolve()
+      } else {
+        if (retryMapCount < 5) {
+          setTimeout(() => {
+            this.retryMapCount++
+            return this.getMarkerCluster(points)
+          }, 1000)
+        } else Promise.reject("加载失败")
+      }
     },
     clear() {
       this.name = ''
@@ -400,36 +269,34 @@ export default {
               lnglat: [item.lng, item.lat],
               id: item.id,
               corpId: item.corpId,
-              areaName:item.areaName,
+              areaName: item.areaName,
               buildingNumber: item.name || item.buildingNumber,
-              communityName:item.name || item.communityName,
+              communityName: item.name || item.communityName,
             }
           })
-
-          this.addMakert(points)
-        }else {
+          this.getMarkerCluster(points)
+        } else {
           this.show = false
           this.$u.toast('未搜索到结果，请换个关键字重试！')
         }
       })
     },
     getBuidInfo(item) {
-       this.$http.post(`/app/appcommunityhouseinfo/queryDetailByIdWithBuilding?buildId=${item.buildingId}&houseId=${item.id}`).then(res => {
+      this.$http.post(`/app/appcommunityhouseinfo/queryDetailByIdWithBuilding?buildId=${item.buildingId}&houseId=${item.id}`).then(res => {
         if (res.code == 0) {
-          this.show = false 
+          this.show = false
           this.showPop = true
           this.detailInfo = res.data
         }
       })
     },
     toList() {
-      console.log(122)
       this.$emit('change', {
         type: 'List',
       })
     },
     callPhone(phone) {
-      uni.makePhoneCall({ phoneNumber: phone })
+      uni.makePhoneCall({phoneNumber: phone})
     },
     toDetail(id) {
       this.$emit('change', {
@@ -442,16 +309,14 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-uni-page-body{
-  height: 100%;
-}
 .searchMap {
-  height: 100%;
-  .grid-input{
+  height: 100vh;
+
+  .grid-input {
     width: 720px;
     height: 88px;
     background: #FFF;
-    box-shadow: 0px 4px 8px 0px rgba(192, 185, 185, 0.5);
+    box-shadow: 0 4px 8px 0 rgba(192, 185, 185, 0.5);
     border-radius: 16px;
     position: fixed;
     top: 24px;
@@ -459,12 +324,14 @@ uni-page-body{
     z-index: 99999;
     padding: 16px 20px;
     box-sizing: border-box;
-    .search-icon{
+
+    .search-icon {
       width: 48px;
       height: 48px;
       margin-right: 16px;
     }
-    .input{
+
+    .input {
       display: inline-block;
       padding: 8px 0;
       height: 32px;
@@ -474,24 +341,28 @@ uni-page-body{
       font-family: MicrosoftYaHei;
       color: #666;
     }
-    .back-icon{
+
+    .back-icon {
       width: 16px;
       height: 32px;
       margin-right: 24px;
       vertical-align: super;
     }
-    .clear-btn{
+
+    .clear-btn {
       display: inline-block;
       width: 32px;
       height: 32px;
       margin-right: 30px;
     }
-    .del-icon{
+
+    .del-icon {
       width: 32px;
       height: 32px;
       vertical-align: super;
     }
-    .search-btn{
+
+    .search-btn {
       display: inline-block;
       width: 80px;
       height: 32px;
@@ -505,7 +376,8 @@ uni-page-body{
       margin-top: 12px;
     }
   }
-  .search-list{
+
+  .search-list {
     position: fixed;
     width: 100%;
     height: 700px;
@@ -516,33 +388,39 @@ uni-page-body{
     box-sizing: border-box;
     background-color: #fff;
     z-index: 99999;
-    .search-icon{
+
+    .search-icon {
       width: 36px;
       height: 36px;
       margin-right: 16px;
       vertical-align: sub;
     }
-    .title{
+
+    .title {
       height: 82px;
       line-height: 82px;
       font-size: 26px;
       font-family: MicrosoftYaHeiSemibold;
       color: #1365DD;
     }
-    .item{
+
+    .item {
       padding: 22px 0 24px 0;
     }
-    .item-content{
+
+    .item-content {
       display: inline-block;
       width: 610px;
       color: #333;
-      h3{
+
+      h3 {
         font-size: 28px;
         font-family: MicrosoftYaHeiSemibold;
         line-height: 32px;
         margin-bottom: 8px;
       }
-      p{
+
+      p {
         width: 100%;
         font-size: 24px;
         font-family: MicrosoftYaHei;
@@ -552,18 +430,21 @@ uni-page-body{
         text-overflow: ellipsis;
       }
     }
-    .user-icon{
+
+    .user-icon {
       vertical-align: top;
     }
-    .border{
+
+    .border {
       border-bottom: 1px solid #DEDFE1;
     }
   }
-  .build-btn{
+
+  .build-btn {
     width: 80px;
     height: 160px;
     background: #FFF;
-    box-shadow: 0px 4px 8px 0px rgba(138, 138, 138, 0.5);
+    box-shadow: 0 4px 8px 0 rgba(138, 138, 138, 0.5);
     border-radius: 8px;
     position: fixed;
     bottom: 136px;
@@ -576,26 +457,31 @@ uni-page-body{
     font-weight: 500;
     color: #666;
     line-height: 30px;
-    img{
+
+    img {
       width: 48px;
       height: 48px;
       margin-bottom: 8px;
     }
   }
-  .map-content{
+
+  .map-content {
     width: 100%;
     height: 100%;
   }
-  .popup{
+
+  .popup {
     padding: 0 32px 16px;
-    .bg{
+
+    .bg {
       width: 64px;
       height: 10px;
       background: #CCC;
       border-radius: 6px;
       margin: 32px 0 32px 344px;
     }
-    .title{
+
+    .title {
       font-size: 36px;
       font-family: PingFang-SC-Heavy, PingFang-SC;
       font-weight: 800;
@@ -603,22 +489,26 @@ uni-page-body{
       line-height: 50px;
       margin-bottom: 24px;
     }
-    .info-flex{
+
+    .info-flex {
       padding: 26px 0 30px 0;
       width: 100%;
       border-bottom: 1px solid #D8DDE6;
       line-height: 40px;
       font-size: 28px;
-      .label{
+
+      .label {
         display: inline-block;
         width: 160px;
         font-weight: 800;
         color: #333;
       }
-      .value{
+
+      .value {
         color: #666;
         font-size: 26px;
-        .phone-icon{
+
+        .phone-icon {
           width: 40px;
           height: 40px;
           vertical-align: sub;
@@ -627,7 +517,8 @@ uni-page-body{
       }
     }
   }
-  .popup-btn{
+
+  .popup-btn {
     width: 100%;
     font-size: 32px;
     font-family: PingFangSC-Medium, PingFang SC;
@@ -638,5 +529,30 @@ uni-page-body{
     background: #1365DD;
     color: #FFF;
   }
+
+  ::v-deep.marker {
+    color: #fff;
+    background: #5088FF;
+    padding: 0 32px;
+    width: fit-content;
+    height: 56px;
+    border-radius: 52px;
+    transform: translate(-50%, -50%);
+    display: flex;
+    align-items: center;
+
+    &:before {
+      content: " ";
+      display: block;
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      width: 0;
+      height: 0;
+      transform: translate(-50%, 100%);
+      border: 12px solid transparent;
+      border-top-color: #5088FF;
+    }
+  }
 }
-</style>
+</style>