fix:地图组件优化文字显示

pages.json

@@ -7,6 +7,7 @@
 		{
 			"path": "pages/index/index",
 			"style": {
+				"navigationStyle": "custom",
 				"navigationBarTitleText": "",
 				"enablePullDownRefresh": false
 			}

pages/index/index.vue

@@ -88,7 +88,7 @@
                   </view>
                   <view class="h-row">
                     <text class="address">地址：{{ storeInfo.address }}</text>
-                    <!-- <text class="address">距你1.8km</text> -->
+                     <text class="address1">{{storeInfo.distanceDesc}}</text>
                   </view>
                 </view>
               </view>
@@ -303,7 +303,7 @@ export default {
 
     }
 
-    // this.getLocation();
+    this.getLocation();
 
     //公告信息
     this.getNoticeListData();
@@ -484,14 +484,13 @@ export default {
           that.reqParm.latitude = latitude
           that.reqParm.longitude = longitude
           uni.setStorageSync('location', that.reqParm)
-          that.getStoreListData(that.reqParm)
         },
         fail:function (fail) {
           console.log('获取用户地址失败==》',fail)
-          that.getStoreListData(that.reqParm)
         },
         complete:function (complete) {
           console.log('获取用户地址失败or成功==》',complete)
+          that.getStoreListData(that.reqParm)
         }
       });
     },
@@ -773,6 +772,12 @@ export default {
                 }
 
                 .address {
+                  width: 400rpx;
+                  color: #999999;
+                  font-size: 12px;
+                  padding-right: 12px;
+                }
+                .address1 {
                   color: #999999;
                   font-size: 12px;
                   padding-right: 12px;

storePages/store/store-choose.vue

@@ -3,7 +3,7 @@
 
         <!-- 地图容器 -->
         <view class="map-wrap">
-            <map style="width: 100%; height: 300px;"
+            <map class="tencent-map" style="width: 100%; height: 300px;"
                  id="map"
                  :latitude="latitude"
                  :longitude="longitude"
@@ -11,6 +11,7 @@
                  :show-location="true"
                  :enable-building="true"
                  :markers="markers"
+                 :show-location="false"
                  @markertap="handleMarkerTap"
             >
             </map>
@@ -36,9 +37,9 @@
                     <view class="h-left-value">
                         <text class="h-name">{{item.storeName}}</text>
                     </view>
-                    <view class="h-right-value">
-                        <!-- <text class="h-text">4.2km</text> -->
-                    </view>
+<!--                    <view class="h-right-value">-->
+<!--                         <text class="h-text">{{item.distanceDesc}}</text>-->
+<!--                    </view>-->
                 </view>
                 <view class="h-row" @click="selectStore(item)">
                     <view class="h-left-value">
@@ -57,14 +58,20 @@
                             <text>{{item.phone || ''}}</text>
                         </view>
                     </view>
-                    <!--					<view class="h-right-value h-flex">-->
-                    <!--						<view  class="phone">-->
-                    <!--							<image src="../../static/goods/u291.png" mode=""></image>-->
-                    <!--						</view>-->
-                    <!--						<view  class="sure">-->
-                    <!--							<image src="../../static/goods/u292.png" mode=""></image>-->
-                    <!--						</view>-->
-                    <!--					</view>-->
+                    <view>
+                        <view class="h-right-value  flex-row justify-between">
+                            <view  class="phone" @click.stop="makePhoneCall(item.phone)">
+                                <image src="../../static/goods/phone.png" mode=""></image>
+                            </view>
+                            <view  class="sure" @click.stop="openmap(item)">
+                                <image src="../../static/goods/daohang.png" mode=""></image>
+                            </view>
+                        </view>
+                        <view class="juli">
+                            {{item.distanceDesc}}
+                        </view>
+                    </view>
+
                 </view>
             </view>
         </view>
@@ -79,7 +86,7 @@
                 areaName: '贵阳市',
                 latitude: 26.5737,
                 longitude: 106.7135,
-                scale: 10,
+                scale: 12,
                 img: '/static/index/u55.png',
                 reqParm: {
                     auth: true,
@@ -98,8 +105,6 @@
         },
         onLoad(option) {
 
-            // 获取商店数据
-            this.getStoreListData();
 
             this.getLocation()
             // 判断Openid是否为空
@@ -111,6 +116,31 @@
         this.navigateRouter = uni.getStorageSync('router');
       },
         methods: {
+
+            openmap(selfTake) {
+                uni.openLocation({
+                    latitude: selfTake.latitude * 1,
+                    longitude: selfTake.longitude * 1,
+                    address: selfTake.address,
+                    success: function () {
+                        console.log('success');
+                    },
+                    fail(err){
+
+                        console.log(err,"++++++++++++++++++++++++++++++")
+                    },
+                });
+            },
+
+            makePhoneCall(phone){
+                if (!phone){
+                    uni.$u.toast('该门店没有设置电话')
+                    return
+                }
+                uni.makePhoneCall({
+                    phoneNumber:phone
+                })
+            },
             getLocation() {
                 let that = this
                 uni.getLocation({
@@ -127,6 +157,8 @@
                     },
                     complete: function (complete) {
                         console.log('获取用户地址失败or成功==》', complete)
+                        // 获取商店数据
+                        that.getStoreListData();
                     }
                 })
             },
@@ -165,6 +197,8 @@
                 }).then((res) => {
                     console.log(res)
                     that.storeList = res.data.data
+                    that.latitude = res.data.data[0].latitude
+                    that.longitude = res.data.data[0].longitude
                     // 添加坐标点
                     that.addMarkers();
                 }).catch(() => {
@@ -185,12 +219,37 @@
                             latitude: p.latitude,
                             longitude: p.longitude,
                             // joinCluster: true, // 指定了该参数才会参与聚合
-                            label: {
-                                width: 150,
-                                height: 30,
+                            // label: {
+                            //     width: 150,
+                            //     height: 30,
+                            //     // display:'ALWAYS',
+                            //     // borderWidth:200,
+                            //     // bgColor:'#ffffff',
+                            //     textAlign: 'center',
+                            //     content: p.storeName
+                            // },
+                            callout: {
+                                // width: 150,
+                                // height: 30,
+                                display:'ALWAYS',
+                                borderWidth:6,
+                                color:'#ffffff',//文字颜色
+                                borderRadius:5,//边框圆角
+                                fontSize:14,//文本大小
+                                bgColor:'#645d57',//背景颜色
+                                borderColor: '#645d57',
                                 textAlign: 'center',
                                 content: p.storeName
-                            }
+                            },
+                            // callout:{//自定义标记点上方的气泡窗口 点击有效
+                            //     content: p.storeName,//文本
+                            //     color:'#000000',//文字颜色
+                            //     // fontSize:14,//文本大小
+                            //     borderRadius:15,//边框圆角
+                            //     borderWidth:'5',
+                            //     bgColor:'#ffffff',//背景颜色
+                            //     display:'ALWAYS',//常显
+                            // },
                         }
                     )
                 })
@@ -262,11 +321,17 @@
                 }
 
                 .h-right-value {
+                    width: 100rpx;
                     .h-text {
                         font-size: 10px;
                         font-weight: 400;
                         color: #999999;
                         line-height: 18px;
+
+                    }
+                    image {
+                        height: 40rpx;
+                        width: 40rpx;
                     }
                 }
 
@@ -274,10 +339,7 @@
                     display: flex;
                     justify-content: space-between;
 
-                    image {
-                        height: 30px;
-                        width: 30px;
-                    }
+
                 }
             }
         }
@@ -320,4 +382,17 @@
             }
         }
     }
+
+    .juli{
+        text-align: center;
+        font-size: 24rpx;
+        font-weight: 400;
+        color: #999999;
+        line-height: 40rpx;
+    }
+
+    /* 隐藏腾讯地图版权标识 */
+    .tencent-map .qq-map-copyright {
+        display: none;
+    }
 </style>