Initial commit of akmon project

pages/location/index.uvue

@@ -0,0 +1,97 @@
+<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>