【新增】 发现好产品页面地图marker和callout信息

pages/shopmap/index.vue

@@ -4,7 +4,7 @@
 			<u-tabs :list="tab_list_father" :is-scroll="true" :current="current_father" @change="tabChangeFather()"></u-tabs>
 		</view>
 		<view>
-			<map class="lf-map-height" :longitude="self_longitude" :latitude="self_latitude" :markers="markers_list">
+			<map class="lf-map-height" :longitude="self_longitude" :latitude="self_latitude" :markers="markers_list" :scale="4" @markertap="markertap" @callouttap="callouttap">
 			</map>
 		</view>
 		<view class="lf-m-t-40 lf-p-l-32 lf-p-r-32">
@@ -149,9 +149,16 @@
 			}
 		},
 		onLoad() {
-			this.getCategory();
 			this.windowHeight = getApp().globalData.windowHeight;
-			this.getShopDistance();
+			this.getShopDistance().then(() => {
+				this.getCategory();
+			}).catch(() => {
+				uni.showModal({
+					title: '',
+					content: '获取位置失败！',
+					showCancel: false
+				})
+			})
 			// 腾讯地图KEY： GB3BZ-7W2CU-LW3VH-B7ZIF-XRKSF-D3FOL
 		},
 		filters: {
@@ -170,6 +177,16 @@
 			}
 		},
 		methods: {
+			// 点击标记时触发
+			markertap(e){
+				let id = e.detail.markerId;
+				this.$url('/pages/goodsDetail/index?goods_id='+ id);
+			},
+			// 点击marker对应的气泡时触发
+			callouttap(e){
+				let id = e.detail.markerId;
+				this.$url('/pages/goodsDetail/index?goods_id='+ id);
+			},
 			// 打开地图
 			openMap(address, lat, lng) {
 				// let { address, lat, lng } = this.goods_detail?.store || {};
@@ -183,22 +200,30 @@
 			//获取当前位置 计算商店距离
 			getShopDistance() {
 				let that = this;
-				uni.getLocation({
-				 type: 'gcj02',
-				 isHighAccuracy: true,
-				 success (res) {
-				   that.self_latitude = res.latitude;
-				   that.self_longitude = res.longitude;
-				   that.getAddressInfo();
-				 },
-				 fail(err) {
-					 console.log(err)
-				 }
+				return new Promise((resolve, reject) => {
+					uni.showLoading({
+						title: '正在获取您的位置'
+					})
+					uni.getLocation({
+					 type: 'gcj02',
+					 isHighAccuracy: true,
+					 success (res) {
+					   uni.hideLoading();
+					   that.self_latitude = res.latitude;
+					   that.self_longitude = res.longitude;
+					   that.getAddressInfo();
+					   resolve();
+					 },
+					 fail(err) {
+						 console.log(err)
+						 uni.hideLoading();
+						 reject();
+					 }
+					})
 				})
 			},
 			// 根据坐标获取地址信息
 			getAddressInfo(){
-				// TODO 配置合法域名
 				qqmapsdk.reverseGeocoder({
 					location: {
 						latitude: this.self_latitude,
@@ -327,24 +352,60 @@
 					}else{
 						tab_item.list.push(...res.data.data);
 					}
-					
+					console.log("res", res);
 					let res_list = res.data.data || [];
-					let markers_self = res_list.map(item => {
-						return {
-							id: item.id,
-							name: item.title,
-							address: item.address,
-							latitude: item.latitude,
-							longitude: item.logitude,
-							width: 30,
-							height: 30
-						}
-					});
-					this.markers_list = markers_self
+					this.createMarkers(res_list);
 				}).catch(err => {
 					
 				})
 			},
+			// 将iconPath下载到本地，然后生成markers渲染出来
+			createMarkers(res_list){
+				let markers_self = [];
+				let p_list = []; // 异步队列
+				uni.showLoading({
+					title: '加载地图信息中'
+				})
+				res_list.map(item => {
+					let itemP = new Promise((resolve, reject) => {
+						uni.downloadFile({
+							url: item.picture,
+							complete: result => {
+								let tempFilePath = "";
+								if (result.statusCode === 200) {
+									tempFilePath = result.tempFilePath;
+								}
+								let obj = {
+									id: item.id,
+									name: item.title,
+									address: item.address,
+									latitude: Number(item.latitude),
+									longitude: Number(item.longitude),
+									iconPath: tempFilePath,
+									width: 30,
+									height: 30,
+									callout: {
+										content: item.title,
+										fontSize: 14,
+										textAlign: 'center',
+										bgColor: "#fff",
+										borderRadius: 14,
+										padding: 4,
+										display: "ALWAYS"
+									}
+								}
+								markers_self.push(obj);
+								resolve();
+							}
+						})
+					});
+					p_list.push(itemP);
+				});
+				Promise.all(p_list).then(res => {
+					this.markers_list = markers_self;
+					uni.hideLoading();
+				})
+			}
 		}
 	}
 </script>