diff --git a/pages/shopmap/index.vue b/pages/shopmap/index.vue
index 445af9a..686a043 100644
--- a/pages/shopmap/index.vue
+++ b/pages/shopmap/index.vue
@@ -4,7 +4,7 @@
-
@@ -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();
+ })
+ }
}
}