120 lines
2.7 KiB
Vue
120 lines
2.7 KiB
Vue
<template>
|
|
<div class="page-map">
|
|
<map id="myMap" class="map"
|
|
:longitude="pageMsg.longitude" :latitude="pageMsg.latitude"
|
|
:markers="pageMsg.markers" :covers="pageMsg.covers" show-location
|
|
@markertap="goDes"
|
|
scale="10">
|
|
</map>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters, mapMutations } from 'vuex'
|
|
export default {
|
|
data () {
|
|
return {
|
|
mapCtx: {},
|
|
pageMsg: {
|
|
|
|
longitude: '',
|
|
latitude: '',
|
|
markers: '',
|
|
covers: ''
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters(['user', 'severList'])
|
|
},
|
|
methods: {
|
|
...mapMutations({
|
|
'setServerPart': 'discoveryServerPart'
|
|
}),
|
|
getLocation () {
|
|
let _this = this
|
|
mpvue.showLoading({
|
|
title: '定位中',
|
|
mask: true
|
|
})
|
|
mpvue.choosePoi({
|
|
type: 'gcj02',
|
|
altitude: true, // 高精度定位
|
|
// 定位成功，更新定位结果
|
|
success: function (res) {
|
|
var latitude = res.latitude
|
|
var longitude = res.longitude
|
|
var speed = res.speed
|
|
var accuracy = res.accuracy
|
|
|
|
_this.pageMsg = {
|
|
longitude: longitude,
|
|
latitude: latitude,
|
|
speed: speed,
|
|
accuracy: accuracy
|
|
}
|
|
_this.getMaker()
|
|
},
|
|
// 定位失败回调
|
|
fail: function () {
|
|
mpvue.showToast({
|
|
title: '定位失败',
|
|
icon: 'none'
|
|
})
|
|
},
|
|
|
|
complete: function () {
|
|
// 隐藏定位中信息进度
|
|
mpvue.hideLoading()
|
|
}
|
|
|
|
})
|
|
},
|
|
goDes (e) {
|
|
let _id = e.mp.markerId
|
|
let item = this.severList.find(n => {
|
|
return n.ServerPart_Id === _id
|
|
})
|
|
this.setServerPart(item)
|
|
mpvue.switchTab({url: '/pages/discovery/main'})
|
|
},
|
|
getMaker () {
|
|
let _this = this
|
|
let markers = []
|
|
_this.severList.map(n => {
|
|
// if (n.Distance < 50) {
|
|
markers.push({
|
|
// iconPath: 'https://eshangtech.com/ShopICO/icos/fwq-ico.png',
|
|
id: n.ServerPart_Id,
|
|
latitude: n.ServerPart_Y,
|
|
longitude: n.ServerPart_X,
|
|
title: n.ServerPart_Name,
|
|
callout: {
|
|
content: n.ServerPart_Name,
|
|
bgColor: '#fff',
|
|
padding: '6',
|
|
borderRadius: '4',
|
|
borderColor: '#f0f0f0',
|
|
display: 'ALWAYS'
|
|
}
|
|
})
|
|
// }
|
|
})
|
|
_this.pageMsg.markers = markers
|
|
}
|
|
},
|
|
onLoad () {
|
|
this.mapCtx = mpvue.createMapContext('myMap')
|
|
this.getLocation()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
.page-map
|
|
height 100%
|
|
.map
|
|
width 750rpx
|
|
height 100%
|
|
</style>
|