odjbin/city-store-transfer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

邓洁 : 地图接口

Browse Source
This commit is contained in:
邓洁
2023-11-18 14:42:53 +08:00
parent cda654b717
commit b055905bc4
1 changed files with 94 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
pages/index/map/map.vue
View File

@@ -8,12 +8,12 @@
</view>
</view> -->
<view class="content">
<map id="map" @markertap="markerClick" @regionchange="handleRegionChange()" :markers="marker"
:show-location="true" :latitude="lat" :longitude="lng" :show-scale="true"></map>
<map id="map" @markertap="markerClick" @regionchange="handleRegionChange()" :markers="marker" show-location="true"
:latitude="lat" :longitude="lng" :show-scale="true"></map>
</view>
<!-- <view class="down-shop">
<view class="down-shop" v-if="showShop">
<ShowShopListItem :shopInfo="shopList" :is-adshow="true" :show-style="0"></ShowShopListItem>
</view> -->
</view>
</view>
</template>
@@ -22,6 +22,7 @@
data() {
return {
radius: '',
showShop: false,
scaleM: [{
scale: 3,
milo: 1000000
@@ -82,29 +83,40 @@
}
],
scale: '',
lat: '30.48772', //纬度
lng: '104.080145', //经度
marker: [{ //用户当前位置
id: 1,
latitude: 30.48772,
longitude: 104.080145,
iconPath: '../../../static/map/sp_icon_dw.png',
width: '58rpx',
height: '72rpx',
rotate: 0,
alpha: 1
},
//周围标记点
{
id: 2,
latitude: 30.488573,
longitude: 104.081248,
lat: uni.getStorageSync('latitude'), //纬度
lng: uni.getStorageSync('longitude'), //经度
marker: [
// { //用户当前位置
// id: 1,
// latitude: uni.getStorageSync('latitude'),
// longitude: uni.getStorageSync('longitude'),
// // iconPath: '../../../static/map/sp_icon_hdw.png',
// width: '58rpx',
// height: '72rpx',
// rotate: 0,
// alpha: 1
// },
// { //用户当前位置
// id: 2,
// latitude: 30.48772,
// longitude: 104.080145,
// iconPath: '../../../static/map/sp_icon_dw.png',
width: '58rpx',
height: '72rpx',
rotate: 0,
alpha: 1
}
// width: '58rpx',
// height: '72rpx',
// rotate: 0,
// alpha: 1
// },
// //周围标记点
// {
// id: 2,
// latitude: 30.488573,
// longitude: 104.081248,
// // iconPath: '../../../static/map/sp_icon_dw.png',
// width: '58rpx',
// height: '72rpx',
// rotate: 0,
// alpha: 1
// }
],
shopList: {
shopid: 1,
@@ -168,35 +180,62 @@
}
},
created() {
this.getMapList()
// this.getMapList()
},
methods: {
getDetail(type, id) {
this.$api.getShopDetail(type, id).then(res => {
console.log('详情', res);
const data = res.data.data
if (res.data.code == 1) {
this.shopList = {
shopid: 1,
imageUrl: this.$api.imgUrl + data.pics,
title: data.tt,
promotionNum: data.num,
price: data.zujin,
date: '2023-11-02',
pos: data.area1,
exactPos: data.address,
sqr: data.mianji,
zrfText: "转让费：" + data.zhuanrangfei,
category: data.trade,
uname: data.lianxiren,
phoneNum: data.mobile,
}
// data.pics = [this.$api.imgUrl + data.pics]
// this.shopInfo = data
}
})
},
handleRegionChange(e) {
console.log('地图缩放层级变化, 只能监听拖拽, 不能监听缩放', e);
},
getMapList(radius) {
console.log('this.radius',radius);
console.log('longitude', uni.getStorageSync('longitude'));
console.log('latitude', uni.getStorageSync('latitude'));
const realData = {
longitude: uni.getStorageSync('longitude'),
latitude: uni.getStorageSync('latitude'),
radius: 100
radius: radius * 1000
}
console.log('realData.radius', realData.radius);
const mockData = {
longitude: 23.40,
latitude: 116.38,
radius: 1111111111
}
this.$api.getMap(mockData).then(res => {
this.$api.getMap(realData).then(res => {
console.log('getMap', res);
let obj = {}
let arr = []
if (res.statusCode === 200) {
if (res.data.code == 1) {
res.data.data.forEach(item => {
obj = {
id: parseInt(item.id),
latitude: item.lat,
longitude: item.lng,
// iconPath: '../../../static/map/sp_icon_dw.png',
iconPath: '../../../static/map/sp_icon_dw.png',
width: '58rpx',
height: '72rpx',
rotate: 0,
@@ -204,7 +243,18 @@
}
arr.push(obj)
})
// this.marker=arr
this.marker = [{ //用户当前位置
id: 1,
latitude: realData.latitude,
longitude: realData.longitude,
iconPath: '../../../static/map/sp_icon_hdw.png',
width: '58rpx',
height: '72rpx',
rotate: 0,
alpha: 1
},
...arr,
]
console.log('this.marker', this.marker);
}
})
@@ -212,12 +262,18 @@
// 图标点击
markerClick(e) {
console.log('标记点击', e);
this.showShop = true
let markerId = e.markerId; //点击标记点, 获取id, 查询店铺详情, 展示在下方
this.getDetail(1, markerId)
this.marker.forEach(item => {
if (markerId === item.id) {
item.iconPath = ""
item.iconPath = "../../../static/map/sp_icon_hdw.png"
item.width = '58rpx'
item.height = '72rpx'
} else {
item.iconPath = "../../../static/map/sp_icon_dw.png"
item.width = '58rpx'
item.height = '72rpx'
}
})
},