|
|
@@ -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>
|
zhanghui
