98 lines
2.6 KiB
Plaintext
98 lines
2.6 KiB
Plaintext
<template>
|
||
<view class="page">
|
||
<map class="map"
|
||
:latitude="centerLat"
|
||
:longitude="centerLng"
|
||
:scale="18"
|
||
:markers="markers"
|
||
:circles="circles">
|
||
</map>
|
||
<view class="toolbar">
|
||
<button class="btn" @click="recenter">回到中心</button>
|
||
<button class="btn" @click="openSysMap">外部地图</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="uts">
|
||
import { wgs84ToGcj02 } from '@/utils/coord.uts'
|
||
|
||
type MapMarker = {
|
||
id: number; latitude: number; longitude: number;
|
||
iconPath: string; width: number; height: number; callout?: any
|
||
}
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
centerLat: 31.23037,
|
||
centerLng: 121.4737,
|
||
// 输入（可通过路由参数传入）- 假设来自 RSSI 解算（WGS84）
|
||
estLat: 31.23037,
|
||
estLng: 121.4737,
|
||
radius: 20,
|
||
markers: [] as Array<MapMarker>,
|
||
circles: [] as Array<any>
|
||
}
|
||
},
|
||
onLoad(options: OnLoadOptions) {
|
||
if (options != null && options['lat'] != null && options['lng'] != null) {
|
||
// 路由参数优先，以字符串形式传入
|
||
const latStr: string = options['lat'] as string
|
||
const lngStr: string = options['lng'] as string
|
||
const latNum = parseFloat(latStr)
|
||
const lngNum = parseFloat(lngStr)
|
||
if (!isNaN(latNum) && !isNaN(lngNum)) {
|
||
this.estLat = latNum
|
||
this.estLng = lngNum
|
||
}
|
||
}
|
||
if (options != null && options['radius'] != null) {
|
||
const rStr: string = options['radius'] as string
|
||
const r = parseInt(rStr)
|
||
if (!isNaN(r)) this.radius = r
|
||
}
|
||
this.refreshDisplay()
|
||
},
|
||
methods: {
|
||
refreshDisplay() {
|
||
const r = wgs84ToGcj02(this.estLat, this.estLng)
|
||
const lat = r[0] as number
|
||
const lng = r[1] as number
|
||
this.centerLat = lat
|
||
this.centerLng = lng
|
||
this.markers = [{
|
||
id: 1,
|
||
latitude: lat,
|
||
longitude: lng,
|
||
iconPath: '/static/marker.png',
|
||
width: 32,
|
||
height: 32,
|
||
callout: { content: '手环估计位置', color: '#000', display: 'ALWAYS' }
|
||
}]
|
||
this.circles = [{
|
||
latitude: lat,
|
||
longitude: lng,
|
||
radius: this.radius,
|
||
color: '#3b82f680',
|
||
fillColor: '#3b82f633',
|
||
strokeWidth: 2
|
||
}]
|
||
},
|
||
recenter() {
|
||
this.refreshDisplay()
|
||
},
|
||
openSysMap() {
|
||
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.page{ display:flex; flex-direction: column; height:100% }
|
||
.map{ flex:1; width:100% }
|
||
.toolbar{ padding: 12rpx; border-top:1px solid #eee; display:flex }
|
||
.btn{ margin-right: 12rpx; padding: 12rpx 16rpx; border:1px solid #ddd; border-radius: 8rpx; background:#fff }
|
||
</style>
|