Refine map compass layout and styling

miniprogram/engine/map/mapEngine.ts

@@ -215,7 +215,7 @@ function formatHeadingText(headingDeg: number | null): string {
     return '--'
   }
 
-  return `${Math.round(normalizeRotationDeg(headingDeg))}deg`
+  return `${Math.round(normalizeRotationDeg(headingDeg))}°`
 }
 
 function formatOrientationModeText(mode: OrientationMode): string {
@@ -1798,5 +1798,6 @@ export class MapEngine {
 
 
 
+
 
 

miniprogram/pages/map/map.ts

@@ -24,7 +24,7 @@ type MapPageData = MapEngineViewState & {
   compassTicks: CompassTickData[]
   compassLabels: CompassLabelData[]
 }
-const INTERNAL_BUILD_VERSION = 'map-build-106'
+const INTERNAL_BUILD_VERSION = 'map-build-110'
 const REMOTE_GAME_CONFIG_URL = 'https://oss-mbh5.colormaprun.com/wxmini/test/game.json'
 let mapEngine: MapEngine | null = null
 function buildCompassTicks(): CompassTickData[] {
@@ -299,3 +299,7 @@ Page({
 
 
 
+
+
+
+

miniprogram/pages/map/map.wxml

@@ -27,14 +27,10 @@
       </view>
 
       <view class="map-stage__bottom">
-        <view class="map-stage__status">
-          <view class="map-stage__status-label">当前模式</view>
-          <view class="map-stage__status-value">{{orientationModeText}}</view>
-          <view class="map-stage__status-meta">{{gpsTrackingText}} · 缩放 {{zoom}}</view>
-        </view>
 
         <view class="compass-widget">
           <view class="compass-widget__heading">{{sensorHeadingText}}</view>
+          <view class="compass-widget__edge-arrow"></view>
           <view class="compass-widget__dial">
             <view class="compass-widget__glass"></view>
             <view class="compass-widget__inner-shadow"></view>

miniprogram/pages/map/map.wxss

@@ -176,37 +176,10 @@
 .map-stage__bottom {
   display: flex;
   align-items: flex-end;
-  justify-content: space-between;
-  gap: 20rpx;
-}
-
-.map-stage__status {
-  max-width: 56%;
-  padding: 18rpx 20rpx;
-  border-radius: 28rpx;
-  background: rgba(248, 251, 244, 0.9);
-  box-shadow: 0 14rpx 30rpx rgba(22, 48, 32, 0.12);
-  backdrop-filter: blur(12rpx);
-}
-
-.map-stage__status-label {
-  font-size: 20rpx;
-  letter-spacing: 3rpx;
-  color: #5f7a65;
-}
-
-.map-stage__status-value {
-  margin-top: 8rpx;
-  font-size: 30rpx;
-  font-weight: 600;
-  color: #163020;
+  justify-content: center;
+  width: 100%;
 }
 
-.map-stage__status-meta {
-  margin-top: 8rpx;
-  font-size: 22rpx;
-  color: #45624b;
-}
 
 .compass-widget {
   display: flex;
@@ -268,6 +241,7 @@
   display: block;
   pointer-events: none;
   z-index: 1;
+  opacity: 0.42;
 }
 
 .compass-widget__north-arrow-outline,
@@ -395,6 +369,18 @@
   box-shadow: inset 0 0 0 2rpx rgba(255, 255, 255, 0.2);
 }
 
+.compass-widget__edge-arrow {
+  width: 0;
+  height: 0;
+  margin-top: -2rpx;
+  margin-bottom: -4rpx;
+  border-left: 8rpx solid transparent;
+  border-right: 8rpx solid transparent;
+  border-top: 14rpx solid rgba(58, 49, 37, 0.72);
+  filter: drop-shadow(0 1rpx 1rpx rgba(255, 255, 255, 0.18));
+}
+
+
 .compass-widget__hint {
   max-width: 196rpx;
   font-size: 14rpx;
@@ -883,3 +869,4 @@
 
 
 
+