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.
135 lines
2.7 KiB
135 lines
2.7 KiB
<template>
|
|
<view class="page">
|
|
<map
|
|
style="width: 100%;"
|
|
:layer-style='5'
|
|
:style="{height:mapheight}"
|
|
:show-location='true'
|
|
:latitude="latitude"
|
|
:longitude="longitude"
|
|
:markers="markers"
|
|
:scale="scale"
|
|
@markertap="markertap"
|
|
@callouttap='callouttap'>
|
|
</map>
|
|
|
|
<view class="content">
|
|
<locations/>
|
|
</view>
|
|
|
|
<tabber select="1"/>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import position from '@/utils/position.js'
|
|
import locations from '@/components/tourGuide/locations.vue'
|
|
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
|
|
// }
|
|
],
|
|
|
|
}
|
|
},
|
|
onLoad() {
|
|
position.getLocation(res => {
|
|
console.log(res);
|
|
this.latitude = res.latitude
|
|
this.longitude = res.longitude
|
|
this.random()
|
|
})
|
|
},
|
|
computed: {
|
|
mapheight() {
|
|
let data = ''
|
|
if (this.bottomData) {
|
|
if (this.upTop) {
|
|
data = '50px'
|
|
} else {
|
|
data = '200px'
|
|
}
|
|
} else {
|
|
data = '50vh'
|
|
}
|
|
return data
|
|
},
|
|
coverbottom() {
|
|
let data = ''
|
|
if (this.bottomData) {
|
|
data = '20rpx'
|
|
} else {
|
|
data = '100rpx'
|
|
}
|
|
return data
|
|
}
|
|
},
|
|
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);
|
|
// },
|
|
// });
|
|
},
|
|
methods: {
|
|
//地图点击事件
|
|
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>
|