You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
129 lines
2.9 KiB
129 lines
2.9 KiB
<template>
|
|
<view class="page">
|
|
<!-- <map
|
|
style="width: 100%;height: 700rpx"
|
|
:layer-style='5'
|
|
:show-location='true'
|
|
:latitude="latitude"
|
|
:longitude="longitude"
|
|
:markers="markers"
|
|
:scale="scale"
|
|
@markertap="markertap"
|
|
@callouttap='callouttap'>
|
|
</map> -->
|
|
|
|
<locations
|
|
:spotGuide="spotGuide"
|
|
:spotGuideMarkers="spotGuideMarkers"
|
|
:area="area"
|
|
@getData="queryAreaListById"
|
|
/>
|
|
|
|
<tabber select="1"/>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import position from '@/utils/position.js'
|
|
import locations from '@/components/tourGuide/locations.vue'
|
|
import { mapState, mapGetters } from 'vuex'
|
|
export default {
|
|
components : {
|
|
locations,
|
|
},
|
|
data() {
|
|
return {
|
|
// latitude: 23.106574, //纬度
|
|
// longitude: 113.324587, //经度
|
|
// scale: 12, //缩放级别
|
|
// bottomData: false,
|
|
// mapCtx: null,
|
|
// markers:[
|
|
// // { //标记点A 的信息
|
|
// // iconPath: "/static/logo.png", //图标
|
|
// // id: 0,
|
|
// // width: 20, //图标icon 宽度
|
|
// // height: 28 ,//图标icon 高度
|
|
// // latitude: 26.1272,
|
|
// // longitude: 113.11659
|
|
// // }
|
|
// ],
|
|
area : [],
|
|
}
|
|
},
|
|
onLoad(args) {
|
|
if(args.areaId){
|
|
this.$store.commit('setAreaId', args.areaId)
|
|
}else{
|
|
this.$store.commit('setAreaId', this.spotList[0].areaId)
|
|
}
|
|
},
|
|
onShow(){
|
|
},
|
|
computed: {
|
|
...mapGetters(['spotGuide', 'spotGuideMarkers']),
|
|
...mapState(['areaId', 'spotList']),
|
|
},
|
|
onShow() {
|
|
// this.mapCtx = wx.createMapContext('map');
|
|
// this.mapCtx && this.mapCtx.addCustomLayer({
|
|
// layerId: '66c5a2ad2849',
|
|
// success: (res) => {
|
|
// console.log('success', res);
|
|
// },
|
|
// fail: (e) => {
|
|
// console.log('fail', e);
|
|
// },
|
|
// });
|
|
this.queryAreaListById()
|
|
},
|
|
methods: {
|
|
queryAreaListById(){
|
|
this.$api('queryAreaListById', {
|
|
areaId : this.areaId
|
|
}, res => {
|
|
if(res.code == 200){
|
|
this.area = res.result
|
|
}
|
|
})
|
|
},
|
|
//地图点击事件
|
|
markertap(e) {
|
|
console.log("===你点击了标记点===", e)
|
|
this.markers.forEach(n => {
|
|
if(n.id == e.detail.markerId){
|
|
uni.openLocation({
|
|
latitude: n.latitude,
|
|
longitude: n.longitude,
|
|
})
|
|
}
|
|
})
|
|
},
|
|
//地图点击事件
|
|
callouttap(e) {
|
|
console.log('地图点击事件', e)
|
|
},
|
|
random(){
|
|
let list = []
|
|
for(let i = 0;i < 10;i++){
|
|
let a = uni.$uv.random(1, 4)
|
|
let obj = {
|
|
latitude: this.latitude + uni.$uv.random(1, 30) / 1000 * (uni.$uv.random(1, 3) - 2),
|
|
longitude: this.longitude + uni.$uv.random(1, 30) / 1000 * (uni.$uv.random(1, 3) - 2),
|
|
width: 20, //图标icon 宽度
|
|
height: 28 ,//图标icon 高度
|
|
iconPath: `/static/image/tourGuide/${a}.png`, //图标
|
|
id: i,
|
|
}
|
|
list.push(obj)
|
|
}
|
|
this.markers = list
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.page{
|
|
}
|
|
</style>
|