|
|
|
|
@ -25,14 +25,15 @@
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="maps">
|
|
|
|
|
<map id="myMap" :longitude="lng" show-location :enable-scroll="!showLoad" @regionchange="pushMarkers"
|
|
|
|
|
:scale="scale" :latitude="lat" :markers="markers" @callouttap="showDetail">
|
|
|
|
|
<map id="myMap" min-scale="6" max-scale="16" :longitude="lng" show-location :enable-scroll="!showLoad"
|
|
|
|
|
@regionchange="pushMarkers" :scale="scale" :latitude="lat" :markers="markers" @callouttap="showDetail">
|
|
|
|
|
<cover-view slot="callout" class="maps-covers">
|
|
|
|
|
<block v-for="(item,index) in markers">
|
|
|
|
|
<cover-view :marker-id="item.id" :key='index'>
|
|
|
|
|
<cover-view class="maps-cover">
|
|
|
|
|
<cover-view class="maps-cover-wrap">
|
|
|
|
|
<cover-image class="maps-cover-img" :src='item.truePath'></cover-image>
|
|
|
|
|
<cover-image class="maps-cover-img" :src='item.truePath'></cover-image>
|
|
|
|
|
|
|
|
|
|
<block v-if="item.has_answer===0">
|
|
|
|
|
<cover-view class="maps-cover-lock">
|
|
|
|
|
<cover-image class="maps-cover-lockimg"
|
|
|
|
|
@ -41,9 +42,9 @@
|
|
|
|
|
</cover-view>
|
|
|
|
|
</block>
|
|
|
|
|
</cover-view>
|
|
|
|
|
<cover-view class="maps-cover-label">
|
|
|
|
|
<cover-image class="maps-labelbg" :src="'/static/home-cur.png'"></cover-image>
|
|
|
|
|
<cover-view>{{item.title}}</cover-view>
|
|
|
|
|
<cover-view class="maps-cover-label" v-if="showLabel">
|
|
|
|
|
<!-- <cover-image class="maps-labelbg" :src="'/static/home-cur.png'"></cover-image> -->
|
|
|
|
|
{{item.title}}
|
|
|
|
|
</cover-view>
|
|
|
|
|
</cover-view>
|
|
|
|
|
</cover-view>
|
|
|
|
|
@ -85,7 +86,7 @@
|
|
|
|
|
</map>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<u-picker v-model="showArea" @confirm="confirmArea" @cancel="cancelArea" :range="listArea" range-key="value"
|
|
|
|
|
<u-picker class="areaPicker" v-model="showArea" :visibleItemCount='10' @confirm="confirmArea" @cancel="cancelArea" :range="listArea" range-key="value"
|
|
|
|
|
:confirm-color="'#e50015'" mode="selector"></u-picker>
|
|
|
|
|
<!-- 锦囊 -->
|
|
|
|
|
<view class="tips" v-if="showTips" :class="showTips?'fade-in':'fade-out'">
|
|
|
|
|
@ -114,7 +115,7 @@
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import tabbar from '@/components/tabbar/tabbar.vue'
|
|
|
|
|
import tabbar from '@/components/tabbar/tabbar.vue'
|
|
|
|
|
import myloading from '@/components/myloading.vue'
|
|
|
|
|
import {
|
|
|
|
|
ROOTPATH as baseUrl
|
|
|
|
|
@ -126,10 +127,10 @@
|
|
|
|
|
getDistance,
|
|
|
|
|
toMapAPP
|
|
|
|
|
} from '@/common/util.js'
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
components: {
|
|
|
|
|
tabbar,
|
|
|
|
|
tabbar,
|
|
|
|
|
myloading
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
@ -140,6 +141,7 @@
|
|
|
|
|
theme_id: '',
|
|
|
|
|
area: '区域',
|
|
|
|
|
mapContext: null,
|
|
|
|
|
mapTimer: null,
|
|
|
|
|
scale: 11,
|
|
|
|
|
lat: null,
|
|
|
|
|
lng: null,
|
|
|
|
|
@ -150,12 +152,14 @@
|
|
|
|
|
pointer: null,
|
|
|
|
|
listArea: [{
|
|
|
|
|
id: '',
|
|
|
|
|
value: '全部'
|
|
|
|
|
value: '全部',
|
|
|
|
|
sort: -999999
|
|
|
|
|
}],
|
|
|
|
|
showArea: false,
|
|
|
|
|
tips: '',
|
|
|
|
|
showLoad: false,
|
|
|
|
|
showNear: true
|
|
|
|
|
showNear: true,
|
|
|
|
|
showLabel:false
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
@ -173,6 +177,28 @@
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
this.mapContext = uni.createMapContext('myMap', this);
|
|
|
|
|
// 获取当前地图层级
|
|
|
|
|
let _this = this
|
|
|
|
|
|
|
|
|
|
if (this.mapTimer) {
|
|
|
|
|
clearInterval(this.mapTimer)
|
|
|
|
|
} else {
|
|
|
|
|
this.mapTimer = setInterval(function() {
|
|
|
|
|
_this.mapContext.getScale({
|
|
|
|
|
success: function(res) {
|
|
|
|
|
if(res.scale>12){
|
|
|
|
|
_this.showLabel = true
|
|
|
|
|
}else{
|
|
|
|
|
_this.showLabel = false
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
fail: function(error) {
|
|
|
|
|
console.log('获取地图缩放级别失败：', error);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}, 1000)
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
onLoad(option) {
|
|
|
|
|
@ -188,9 +214,9 @@
|
|
|
|
|
},
|
|
|
|
|
onShow() {
|
|
|
|
|
let vuex_pointer = uni.getStorageSync('vuex_pointer') ? uni.getStorageSync('vuex_pointer') : null
|
|
|
|
|
let vuex_latlng = uni.getStorageSync('vuex_latlng') ? uni.getStorageSync('vuex_latlng') : ''
|
|
|
|
|
let vuex_latlng = uni.getStorageSync('vuex_latlng') ? uni.getStorageSync('vuex_latlng') : ''
|
|
|
|
|
let vuex_point_id = uni.getStorageSync('vuex_point_id') ? uni.getStorageSync('vuex_point_id') : ''
|
|
|
|
|
// 通过搜索获取的点位信息
|
|
|
|
|
// 通过搜索获取的点位信息
|
|
|
|
|
if (vuex_pointer) {
|
|
|
|
|
this.pointer = vuex_pointer
|
|
|
|
|
this.pointer.distance = getDistance(vuex_latlng.lat, vuex_latlng.lng, this.pointer.lat, this.pointer.lng)
|
|
|
|
|
@ -201,23 +227,26 @@
|
|
|
|
|
longitude: parseFloat(this.pointer.lng),
|
|
|
|
|
latitude: parseFloat(this.pointer.lat)
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
// 答题的点位解锁
|
|
|
|
|
console.log("vuex_point_id",vuex_point_id)
|
|
|
|
|
if(vuex_point_id){
|
|
|
|
|
this.markers.map(item=>{
|
|
|
|
|
if(item.id==vuex_point_id){
|
|
|
|
|
item.has_answer = 1
|
|
|
|
|
uni.removeStorageSync("vuex_point_id")
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
// 答题的点位解锁
|
|
|
|
|
if (vuex_point_id) {
|
|
|
|
|
this.markers.map(item => {
|
|
|
|
|
if (item.id == vuex_point_id) {
|
|
|
|
|
item.has_answer = 1
|
|
|
|
|
uni.removeStorageSync("vuex_point_id")
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
onHide() {
|
|
|
|
|
console.log("this.showTips", this.showTips)
|
|
|
|
|
this.showTips = false
|
|
|
|
|
this.showPointer = false
|
|
|
|
|
this.pointer = null
|
|
|
|
|
this.pointer = null
|
|
|
|
|
if(!this.mapTimer){
|
|
|
|
|
this.mapTimer = null
|
|
|
|
|
clearInterval(this.mapTimer)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
// 我的位置
|
|
|
|
|
@ -225,7 +254,6 @@
|
|
|
|
|
uni.getLocation({
|
|
|
|
|
type: 'gcj02',
|
|
|
|
|
success: (res) => {
|
|
|
|
|
console.log("res", res)
|
|
|
|
|
uni.removeStorageSync('vuex_latlng')
|
|
|
|
|
this.lng = res.longitude
|
|
|
|
|
this.lat = res.latitude
|
|
|
|
|
@ -244,7 +272,6 @@
|
|
|
|
|
await uni.login({
|
|
|
|
|
provider: 'weixin',
|
|
|
|
|
success: (res) => {
|
|
|
|
|
console.log("rescode", res.code)
|
|
|
|
|
this.$u.api.login({
|
|
|
|
|
code: res.code
|
|
|
|
|
}).then(res => {
|
|
|
|
|
@ -278,6 +305,7 @@
|
|
|
|
|
},
|
|
|
|
|
success(res) {
|
|
|
|
|
that.listArea.push(...res.data.detail)
|
|
|
|
|
that.listArea.sort((a, b) => a.sort - b.sort);
|
|
|
|
|
},
|
|
|
|
|
fail(err) {
|
|
|
|
|
console.log(err)
|
|
|
|
|
@ -290,66 +318,66 @@
|
|
|
|
|
this.theme_id = this.listArea[e].id
|
|
|
|
|
this.showPointer = false
|
|
|
|
|
this.pointer = null
|
|
|
|
|
this.showNear = true
|
|
|
|
|
this.showNear = true
|
|
|
|
|
this.scale = 11
|
|
|
|
|
this.markers = []
|
|
|
|
|
|
|
|
|
|
// 根据区域id 遍历所有 重新生成markers
|
|
|
|
|
if(this.theme_id==''){
|
|
|
|
|
// this.mapContext.moveToLocation({
|
|
|
|
|
// longitude: this.lng,
|
|
|
|
|
// latitude: this.lat,
|
|
|
|
|
// });
|
|
|
|
|
// this.getPointers()
|
|
|
|
|
this.pointers.map((item, index) => {
|
|
|
|
|
if(index<10){
|
|
|
|
|
this.markers.push({
|
|
|
|
|
id: item.id,
|
|
|
|
|
latitude: parseFloat(item.lat),
|
|
|
|
|
longitude: parseFloat(item.lng),
|
|
|
|
|
iconPath: '/static/home-marker.png',
|
|
|
|
|
truePath: item.logo ? item.logo.url : item.image.url,
|
|
|
|
|
width: 0,
|
|
|
|
|
height: 0,
|
|
|
|
|
title: item.name,
|
|
|
|
|
distance: item.distance ? parseInt(item.distance) : 0,
|
|
|
|
|
has_answer: item.has_answer,
|
|
|
|
|
customCallout: {
|
|
|
|
|
anchorX: 70,
|
|
|
|
|
anchorY: 30,
|
|
|
|
|
display: 'ALWAYS'
|
|
|
|
|
},
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
}else{
|
|
|
|
|
this.pointers.map((item, index) => {
|
|
|
|
|
if (this.theme_id && item.theme_id == this.theme_id) {
|
|
|
|
|
this.markers.push({
|
|
|
|
|
id: item.id,
|
|
|
|
|
latitude: parseFloat(item.lat),
|
|
|
|
|
longitude: parseFloat(item.lng),
|
|
|
|
|
iconPath: '/static/home-marker.png',
|
|
|
|
|
truePath: item.logo ? item.logo.url : item.image.url,
|
|
|
|
|
width: 0,
|
|
|
|
|
height: 0,
|
|
|
|
|
title: item.name,
|
|
|
|
|
distance: item.distance ? parseInt(item.distance) : 0,
|
|
|
|
|
has_answer: item.has_answer,
|
|
|
|
|
customCallout: {
|
|
|
|
|
anchorX: 70,
|
|
|
|
|
anchorY: 30,
|
|
|
|
|
display: 'ALWAYS'
|
|
|
|
|
},
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
this.mapContext.moveToLocation({
|
|
|
|
|
longitude: this.markers[0].longitude,
|
|
|
|
|
latitude: this.markers[0].latitude,
|
|
|
|
|
});
|
|
|
|
|
this.markers = []
|
|
|
|
|
|
|
|
|
|
// 根据区域id 遍历所有 重新生成markers
|
|
|
|
|
if (this.theme_id == '') {
|
|
|
|
|
// this.mapContext.moveToLocation({
|
|
|
|
|
// longitude: this.lng,
|
|
|
|
|
// latitude: this.lat,
|
|
|
|
|
// });
|
|
|
|
|
// this.getPointers()
|
|
|
|
|
this.pointers.map((item, index) => {
|
|
|
|
|
if (index < 10) {
|
|
|
|
|
this.markers.push({
|
|
|
|
|
id: item.id,
|
|
|
|
|
latitude: parseFloat(item.lat),
|
|
|
|
|
longitude: parseFloat(item.lng),
|
|
|
|
|
iconPath: '/static/home-marker.png',
|
|
|
|
|
truePath: item.logo ? item.logo.url : item.image.url,
|
|
|
|
|
width: 0,
|
|
|
|
|
height: 0,
|
|
|
|
|
title: item.name,
|
|
|
|
|
distance: item.distance ? parseInt(item.distance) : 0,
|
|
|
|
|
has_answer: item.has_answer,
|
|
|
|
|
customCallout: {
|
|
|
|
|
anchorX: 70,
|
|
|
|
|
anchorY: 30,
|
|
|
|
|
display: 'ALWAYS'
|
|
|
|
|
},
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
} else {
|
|
|
|
|
this.pointers.map((item, index) => {
|
|
|
|
|
if (this.theme_id && item.theme_id == this.theme_id) {
|
|
|
|
|
this.markers.push({
|
|
|
|
|
id: item.id,
|
|
|
|
|
latitude: parseFloat(item.lat),
|
|
|
|
|
longitude: parseFloat(item.lng),
|
|
|
|
|
iconPath: '/static/home-marker.png',
|
|
|
|
|
truePath: item.logo ? item.logo.url : item.image.url,
|
|
|
|
|
width: 0,
|
|
|
|
|
height: 0,
|
|
|
|
|
title: item.name,
|
|
|
|
|
distance: item.distance ? parseInt(item.distance) : 0,
|
|
|
|
|
has_answer: item.has_answer,
|
|
|
|
|
customCallout: {
|
|
|
|
|
anchorX: 70,
|
|
|
|
|
anchorY: 30,
|
|
|
|
|
display: 'ALWAYS'
|
|
|
|
|
},
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
this.mapContext.moveToLocation({
|
|
|
|
|
longitude: this.markers[0].longitude,
|
|
|
|
|
latitude: this.markers[0].latitude,
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
// this.getPointers()
|
|
|
|
|
}
|
|
|
|
|
@ -384,7 +412,6 @@
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
getNears() {
|
|
|
|
|
console.log("123")
|
|
|
|
|
this.scale = 13
|
|
|
|
|
this.showPointer = false
|
|
|
|
|
this.pointer = null
|
|
|
|
|
@ -425,7 +452,6 @@
|
|
|
|
|
},
|
|
|
|
|
// 移动地图加载更多
|
|
|
|
|
pushMarkers(e) {
|
|
|
|
|
console.log("e", e)
|
|
|
|
|
let lengthM = this.markers.length //当前markers数量
|
|
|
|
|
// 加载完毕 或 区域选择 移动不加载
|
|
|
|
|
if (this.showLoad || this.theme_id) {
|
|
|
|
|
@ -435,7 +461,7 @@
|
|
|
|
|
this.pointers.map((item, index) => {
|
|
|
|
|
// 每次移动加载10条
|
|
|
|
|
if (index > lengthM - 1 && index < lengthM + 10) {
|
|
|
|
|
// uni.showLoading()
|
|
|
|
|
// uni.showLoading()
|
|
|
|
|
this.$refs.myloading.showLoading()
|
|
|
|
|
this.showLoad = true
|
|
|
|
|
this.markers.push({
|
|
|
|
|
@ -457,9 +483,9 @@
|
|
|
|
|
})
|
|
|
|
|
let that = this
|
|
|
|
|
setTimeout(function() {
|
|
|
|
|
// uni.hideLoading()
|
|
|
|
|
that.$refs.myloading.hideLoading()
|
|
|
|
|
|
|
|
|
|
// uni.hideLoading()
|
|
|
|
|
that.$refs.myloading.hideLoading()
|
|
|
|
|
|
|
|
|
|
that.showLoad = false
|
|
|
|
|
}, 2000)
|
|
|
|
|
}
|
|
|
|
|
@ -484,7 +510,6 @@
|
|
|
|
|
if (arr.length > 0) {
|
|
|
|
|
this.pointer = arr[0]
|
|
|
|
|
this.pointer.distance = getDistance(this.lat, this.lng, this.pointer.lat, this.pointer.lng)
|
|
|
|
|
console.log(this.pointer.distance)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.showPointer = true
|
|
|
|
|
@ -534,8 +559,8 @@
|
|
|
|
|
padding: 0 30rpx;
|
|
|
|
|
|
|
|
|
|
&-left {
|
|
|
|
|
width: 58rpx;
|
|
|
|
|
height: 86rpx;
|
|
|
|
|
width: 57rpx;
|
|
|
|
|
height: 87rpx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&-center {
|
|
|
|
|
@ -638,8 +663,8 @@
|
|
|
|
|
text-align: right;
|
|
|
|
|
|
|
|
|
|
cover-image {
|
|
|
|
|
width: 243rpx;
|
|
|
|
|
height: 142rpx;
|
|
|
|
|
width: 246rpx;
|
|
|
|
|
height: 132rpx;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@ -649,8 +674,10 @@
|
|
|
|
|
&-cover {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
z-index: 9999;
|
|
|
|
|
|
|
|
|
|
z-index: 9999;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
position: relative;
|
|
|
|
|
flex-flow: column;
|
|
|
|
|
&-wrap {
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
@ -684,23 +711,23 @@
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&-label {
|
|
|
|
|
cover-image {
|
|
|
|
|
width: 270rpx;
|
|
|
|
|
height: 65rpx;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
font-size: 20rpx;
|
|
|
|
|
color: #dbd0ba;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
// cover-image {
|
|
|
|
|
// width: 270rpx;
|
|
|
|
|
// height: 65rpx;
|
|
|
|
|
|
|
|
|
|
cover-view {
|
|
|
|
|
padding: 10rpx 40rpx;
|
|
|
|
|
width: 200rpx;
|
|
|
|
|
white-space: normal;
|
|
|
|
|
position: absolute;
|
|
|
|
|
}
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
font-size: 22rpx;
|
|
|
|
|
color: #960909;
|
|
|
|
|
width: 200rpx;
|
|
|
|
|
text-align: center;
|
|
|
|
|
white-space: normal;
|
|
|
|
|
// cover-view {
|
|
|
|
|
// padding: 10rpx;
|
|
|
|
|
// width: 200rpx;
|
|
|
|
|
// white-space: normal;
|
|
|
|
|
// position: absolute;
|
|
|
|
|
// }
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@ -747,10 +774,10 @@
|
|
|
|
|
font-size: 33rpx;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
line-height: 2;
|
|
|
|
|
height: 650rpx;
|
|
|
|
|
height: 660rpx;
|
|
|
|
|
overflow: scroll;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 350rpx;
|
|
|
|
|
top: 345rpx;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translate(-50%, 0%);
|
|
|
|
|
width: 80%;
|
|
|
|
|
@ -762,6 +789,16 @@
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.areaPicker{
|
|
|
|
|
.u-drawer{
|
|
|
|
|
>view{
|
|
|
|
|
.u-picker-body{
|
|
|
|
|
height:750rpx;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
