增加地图当前位置的图标,优化切换页面时图片拉伸问题,优化地图标记和气泡点击事件方法

youmengting-dev
游梦婷 1 year ago
parent 126ed23251
commit edfaee6bc5
  1. 104
      pages/tabBar/category/category.vue
  2. 10
      pages/tabBar/user/user.vue
  3. 4
      physical-merchants/classify/goodsDetail/goodsDetail.vue
  4. BIN
      static/img/location.png
  5. BIN
      static/img/user/user1.png
  6. BIN
      static/img/user/user14.png
  7. BIN
      static/img/user/user2.png
  8. BIN
      static/img/user/user3.png
  9. BIN
      static/img/user/user4.png
  10. BIN
      static/img/user/user6.png

@ -1,8 +1,8 @@
<template> <template>
<view class="map-container"> <view class="map-container">
<!-- #ifdef H5 --> <!-- #ifdef H5 -->
<map style="width: 100%; height: 10vh;" :style="{height:mapheight}" :latitude="latitude" :longitude="longitude" <map id="myMap" style="width: 100%; height: 10vh;" :style="{height:mapheight}" :latitude="latitude"
:markers="marker" :scale="scale" @markertap="markertap" @callouttap='callouttap'> :longitude="longitude" :markers="marker" :scale="scale" @markertap="markertap" @callouttap='callouttap'>
<cover-view class="cover-view-loca" :style='{bottom:coverbottom}' @click="onControltap"> <cover-view class="cover-view-loca" :style='{bottom:coverbottom}' @click="onControltap">
<cover-image class="cover-image" src="../../../static/img/dispos.png"></cover-image> <cover-image class="cover-image" src="../../../static/img/dispos.png"></cover-image>
</cover-view> </cover-view>
@ -107,8 +107,8 @@
<!-- #endif --> <!-- #endif -->
<!-- #ifdef MP --> <!-- #ifdef MP -->
<map style="width: 100%; height: 10vh;" :style="{height:mapheight}" :latitude="latitude" :longitude="longitude" <map id="myMap" style="width: 100%; height: 10vh;" :style="{height:mapheight}" :latitude="latitude"
:markers="marker" :scale="scale" @markertap="markertap" @callouttap='callouttap'> :longitude="longitude" :markers="marker" :scale="scale" @markertap="markertap" @callouttap='callouttap'>
<cover-view class="cover-view-loca" :style='{bottom:coverbottom}' @click="onControltap"> <cover-view class="cover-view-loca" :style='{bottom:coverbottom}' @click="onControltap">
<cover-image class="cover-image" src="../../../static/img/dispos.png"></cover-image> <cover-image class="cover-image" src="../../../static/img/dispos.png"></cover-image>
</cover-view> </cover-view>
@ -123,10 +123,10 @@
<view class="width100 mart15 backcorfff cover-viewchage alijus fotct" style="border-radius: 22px;"> <view class="width100 mart15 backcorfff cover-viewchage alijus fotct" style="border-radius: 22px;">
<!-- :class="[selectFirst == 1? 'onchange' : '']" --> <!-- :class="[selectFirst == 1? 'onchange' : '']" -->
<view class="font14 width30w fotct onchange text1" @click="changeChilerType()">{{selectFirstName}} <view class="font14 width30w fotct onchange text1" @click="changeChilerType()">{{selectFirstName}}
<image mode="widthFix" class="margle" style="width: 8px;" :src="imagewxUrl+imgadres2"></image> <image mode="aspectFit" class="margle" style="width: 8px;height:8px;" :src="imagewxUrl+imgadres2"></image>
</view> </view>
<view class="font14 width30w onchange" @click="changeChilerdistance()">{{distanceName}} <view class="font14 width30w onchange" @click="changeChilerdistance()">{{distanceName}}
<image mode="widthFix" class="margle" style="width: 8px;" :src="imagewxUrl+imgadres2"></image> <image mode="aspectFit" class="margle" style="width: 8px;height:8px;" :src="imagewxUrl+imgadres2"></image>
</view> </view>
<view class="font14 width30w"> <view class="font14 width30w">
<!-- 全部 <!-- 全部
@ -222,13 +222,14 @@
return { return {
latitude: '', // latitude: '', //
longitude: '', // longitude: '', //
mapContext: null,
scale: 13, // scale: 13, //
bottomData: false, bottomData: false,
imagewxUrl: app.globalData.imageWxImg, imagewxUrl: app.globalData.imageWxImg,
imgadres2: 'xiala.png', imgadres2: 'xiala.png',
imgadres3: 'noorder.png', imgadres3: 'noorder.png',
imgadres4: 'dh.png', imgadres4: 'dh.png',
marker: '', // marker: [], //
typeid: 99999999, // typeid: 99999999, //
isSelected: 1, // isSelected: 1, //
selectFirst: '99999999', // selectFirst: '99999999', //
@ -282,11 +283,17 @@
typeplat: 1 // typeplat: 1 //
} }
}, },
onLoad() {}, onLoad() {
this.onControltap();
},
onReady() {
this.mapContext = uni.createMapContext('myMap');
console.log(this.mapContext)
},
onShow() { onShow() {
// this.latitude = app.globalData.latitude; // this.latitude = app.globalData.latitude;
// this.longitude = app.globalData.longitude; // this.longitude = app.globalData.longitude;
this.onControltap(); /* this.onControltap(); */
}, },
computed: { computed: {
mapheight() { mapheight() {
@ -338,9 +345,9 @@
}) })
}, },
// //
getMapStore() { getMapStore() {
uni.showLoading({ uni.showLoading({
title: '加载中...' title: '加载中...'
}) })
let childId = ''; let childId = '';
if (this.selectFirst == 99999999) { if (this.selectFirst == 99999999) {
@ -356,13 +363,27 @@
longitude: this.longitude, longitude: this.longitude,
latitude: this.latitude latitude: this.latitude
} }
getMapStore(datas).then(res => { getMapStore(datas).then(res => {
uni.hideLoading(); uni.hideLoading();
if (res.return_code == '000000') { if (res.return_code == '000000') {
this.marker = res.return_data this.marker = res.return_data;
// console.log(this.marker,"marker")
} else { } else {
this.marker = []; this.marker = [];
} }
this.marker.push({
id: 0,
latitude: this.latitude,
longitude: this.longitude,
iconPath: '/static/img/location.png',
rotate: 1,
alpha: 1,
width: 40,
height: 40
})
}) })
}, },
// //
@ -379,27 +400,26 @@
this.selectChilerdistance = 2; this.selectChilerdistance = 2;
this.getMapStore(); this.getMapStore();
}, },
// //,
markertap(e) { markertap(e) {
// #ifdef H5 // console.log(e,"");
let markerId = e.detail.markerId; let markerId = e.detail.markerId;
if(markerId == 0) return; /* 点击当前自己定位的标记点*/
for (var i = 0; i < this.marker.length; i++) { for (var i = 0; i < this.marker.length; i++) {
if (markerId == this.marker[i].id) { if (markerId == this.marker[i].id) {
this.seeloaction(this.marker[i]); this.seeloaction(this.marker[i]);
} }
} }
// #endif
}, },
// //,
callouttap(e) { callouttap(e) {
// #ifdef MP // console.log(e, "")
let markerId = e.markerId; let markerId = e.detail.markerId;
for (var i = 0; i < this.marker.length; i++) { for (var i = 0; i < this.marker.length; i++) {
if (markerId == this.marker[i].id) { if (markerId == this.marker[i].id) {
this.seeloaction(this.marker[i]); this.seeloaction(this.marker[i]);
} }
} }
// #endif
}, },
postionIng() { postionIng() {
@ -523,6 +543,18 @@
// console.log(res, '') // console.log(res, '')
this.longitude = res.longitude; this.longitude = res.longitude;
this.latitude = res.latitude; this.latitude = res.latitude;
if(this.mapContext){
this.mapContext.moveToLocation({
latitude: this.latitude,
longitude: this.longitude,
success(res){
// console.log(res,"")
}
})
}
console.log(this.longitude, this.latitude, "this.longitude,this.latitude")
this.getIndustry(); this.getIndustry();
}, },
fail() { fail() {
@ -550,15 +582,15 @@
"ext2": null, "ext2": null,
"status": 1, "status": 1,
"ext1": "642" "ext1": "642"
}]; }];
this.selectFirst = '99999999'; this.selectFirst = '99999999';
this.selectFirstName = '全部'; this.selectFirstName = '全部';
}else{ } else {
this.goodsSendotClassList = item.childIndustry; this.goodsSendotClassList = item.childIndustry;
this.selectFirst = item.childIndustry[0].id; this.selectFirst = item.childIndustry[0].id;
this.selectFirstName = item.childIndustry[0].name; this.selectFirstName = item.childIndustry[0].name;
} }
this.getMapStore(); this.getMapStore();
}, },
// //
@ -585,18 +617,26 @@
this.isSelected = item; this.isSelected = item;
}, },
seeloaction(item) { seeloaction(item) {
// #ifdef H5 console.log(item,"item");
uni.openLocation({
latitude: parseFloat(item.latitude), //
longitude: parseFloat(item.longitude), //
name: item.callout.content,
address: item.callout.address
})
/*
window.location.href = window.location.href =
`http://apis.map.qq.com/uri/v1/marker?marker=coord:(${item.latitude},${item.longitude})&addr:${item.address}`; `http://apis.map.qq.com/uri/v1/marker?marker=coord:(${item.latitude},${item.longitude})&addr:${item.address}`;
// #endif
// #ifdef MP
uni.openLocation({ uni.openLocation({
latitude: Number(item.latitude), // latitude: Number(item.latitude), //
longitude: Number(item.longitude), // longitude: Number(item.longitude), //
name: item.store_name, name: item.store_name,
address: item.address address: item.address
}) })
// #endif */
}, },
} }
} }

@ -50,7 +50,7 @@
<view class="title width94"> <view class="title width94">
<view class="width70 fontwig6">订单</view> <view class="width70 fontwig6">订单</view>
<view class="width30 alijusend font14 fcor999" @click="toOrderList(-1)">全部订单<image class="icon15" <view class="width30 alijusend font14 fcor999" @click="toOrderList(-1)">全部订单<image class="icon15"
mode="widthFix" src="../../../static/img/jt.png"> mode="aspectFit" style="width: 15px;height: 15px;" src="../../../static/img/jt.png">
</image> </image>
</view> </view>
</view> </view>
@ -65,7 +65,7 @@
v-if="row.text == '已完成' && whetherCheckNum " :text="whetherCheckNum" type="error" size="normal"> v-if="row.text == '已完成' && whetherCheckNum " :text="whetherCheckNum" type="error" size="normal">
</uni-badge> </uni-badge>
<view class="img"> <view class="img">
<image :src="row.icon" class="icon40" mode="widthFix"></image> <image :src="row.icon" class="icon40" style="width: 40px;height: 40px;" mode="aspectFit"></image>
</view> </view>
<view class="text mart10">{{row.text}}</view> <view class="text mart10">{{row.text}}</view>
</view> </view>
@ -111,13 +111,13 @@
<view class="order"> <view class="order">
<view class="title width94"> <view class="title width94">
<view class="width70 fontwig6 alijusstart">我的资产 <view class="width70 fontwig6 alijusstart">我的资产
<image mode="widthFix" class="icon30" v-if="assetsstu == 2" @click="updatestu(2)" <image mode="aspectFit" style="width: 20px;height: 20px;" class="icon20 margle" v-show="assetsstu == 2" @click="updatestu(2)"
src="../../../static/img/user/user6.png"></image> src="../../../static/img/user/user6.png"></image>
<image mode="widthFix" class="icon20 margle" v-if="assetsstu == 1" @click="updatestu(1)" <image mode="aspectFit" style="width: 20px;height: 20px;" class="icon20 margle" v-show="assetsstu == 1" @click="updatestu(1)"
src="../../../static/img/user/user14.png"></image> src="../../../static/img/user/user14.png"></image>
</view> </view>
<view class="width30 alijusend font14 fcor999" @click="jumppage(4)">进入卡包<image class="icon15" <view class="width30 alijusend font14 fcor999" @click="jumppage(4)">进入卡包<image class="icon15"
mode="widthFix" src="../../../static/img/jt.png"> mode="aspectFit" style="width: 15px;height: 15px;" src="../../../static/img/jt.png">
</image> </image>
</view> </view>
</view> </view>

@ -412,7 +412,7 @@
} else if (item.type == 3) { } else if (item.type == 3) {
/* 分享给好友 */ /* 分享给好友 */
// #ifdef H5 // #ifdef H5
console.log("点击了分享好友") // console.log("")
this.rightTopSrc="../../static/img/rightTop.png" this.rightTopSrc="../../static/img/rightTop.png"
setTimeout(()=>{ setTimeout(()=>{
@ -463,7 +463,7 @@
} }
if (e.index == 1) { if (e.index == 1) {
console.log("点击分享") // console.log("")
this.$refs.share.toggleMask(); this.$refs.share.toggleMask();
return return

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.6 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 795 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 904 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.2 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.7 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

Loading…
Cancel
Save