From f26abe987e9491977b25049976adcc81572f1550 Mon Sep 17 00:00:00 2001
From: taohebin <taohebin@dcloud.io>
Date: Fri, 27 Sep 2024 16:08:09 +0800
Subject: [PATCH] =?UTF-8?q?update=EF=BC=9A=E9=80=82=E9=85=8D=E8=85=BE?=
 =?UTF-8?q?=E8=AE=AF=E5=9C=B0=E5=9B=BEApp=E7=AB=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                   |   2 +-
 pages/component/map/map.uvue | 265 ++++++++++++-----------------------
 2 files changed, 87 insertions(+), 180 deletions(-)

diff --git a/pages.json b/pages.json
index 146f60f2..85ff538e 100644
--- a/pages.json
+++ b/pages.json
@@ -437,7 +437,7 @@
 			}
 		},
 		// #endif
-		// #ifdef WEB
+		// #ifdef WEB || APP
 		{
 			"path": "pages/component/map/map",
 			"group": "0,6",
diff --git a/pages/component/map/map.uvue b/pages/component/map/map.uvue
index 1740e747..c8a893da 100644
--- a/pages/component/map/map.uvue
+++ b/pages/component/map/map.uvue
@@ -18,9 +18,11 @@
 
 
       <button class="button" @click="addControls">控件</button>
-      <button class="button" @click="addMarkers">添加标记点</button>
-      <button class="button" @click="addMarkersLabel">为标记点旁边增加标签</button>
-      <button class="button" @click="deleteMarker">移除ID为4的标记点和标签</button>
+      <button class="button" @click="addMarkers">添加标记点</button>
+      <!-- #ifdef WEB -->
+      <button class="button" @click="addMarkersLabel">为标记点旁边增加标签</button>
+      <!-- #endif -->
+      <button class="button" @click="removeMarker">移除ID为4的标记点和标签</button>
       <button class="button" @click="addPolyline">添加路线</button>
       <button class="button" @click="removePolyline">移除一条路线</button>
       <button class="button" @click="addPolygons">添加多边形</button>
@@ -42,113 +44,21 @@
 </template>
 
 <script setup lang="uts">
-  type Anchor = {
-    x : number,
-    y : number
-  }
-
-  type Callout = {
-    content : string,
-    color : string,
-    fontSize : number,
-    borderRadius : number,
-    borderWidth : number,
-    borderColor : string,
-    bgColor : string,
-    padding : number,
-    display : string
-  }
-
-  type Label = {
-    content : string,
-    color : string,
-    fontSize : number,
-    x : number,
-    y : number,
-    borderColor : string
-    borderWidth : number,
-    borderRadius : number,
-    bgColor : string,
-    padding : number
-  }
-
-  type Markers = {
-    id : number,
-    latitude : number,
-    longitude : number,
-    title ?: string,
-    iconPath : string,
-    zIndex ?: string,
-    rotate ?: number,
-    width ?: number,
-    height ?: number,
-    label ?: Label,
-    anchor ?: Anchor,
-    callout ?: Callout
-  }
-
-  type Points = {
-    latitude : number,
-    longitude : number
-  }
-
-  type Polyline = {
-    points : Points[],
-    color : string,
-    width : number,
-    dottedLine : boolean,
-    arrowLine : boolean,
-    borderColor : string,
-    borderWidth : number
-  }
-
-  type Polygons = {
-    points : Points[];
-    fillColor : string;
-    strokeWidth : number;
-    strokeColor : string;
-    zIndex : number;
-  }
-
-  type Circles = {
-    latitude : number;
-    longitude : number;
-    radius : number;
-    strokeWidth : number;
-    color : string;
-    fillColor : string;
-  }
-
-  type PositionType = {
-    left : number,
-    top : number,
-    width : number,
-    height : number
-  }
-
-  type ControlsType = {
-    id ?: number;
-    position : PositionType;
-    iconPath : string;
-    clickable ?: boolean;
-  }
-
   type TypeJestResult = {
     translateMarkerMsg : string,
     animationEnd : boolean,
-    centerPoints : Points,
-    southwest : Points,
-    northeast : Points,
+    centerPoints : LocationObject,
+    southwest : LocationObject,
+    northeast : LocationObject,
     moveToLocationMsg : string,
     scale : number
   }
 
-  const testMarkers = [{
+  const testMarkers :Marker[]= [{
     id: 0,
     latitude: 39.989631,
     longitude: 116.481018,
     title: '方恒国际 阜通东大街6号',
-    zIndex: '1',
     iconPath: '../../../static/location.png',
     rotate: 0,
     width: 20,
@@ -156,7 +66,7 @@
     anchor: {
       x: 0.5,
       y: 1
-    },
+    } ,
     callout: {
       content: '方恒国际 阜通东大街6号',
       color: '#00BFFF',
@@ -167,14 +77,14 @@
       bgColor: '#CCFF99',
       padding: 5,
       display: 'ALWAYS'
-    }
+    } as MapMarkerCallout
   },
   {
     id: 1,
     latitude: 39.9086920000,
     longitude: 116.3974770000,
     title: '天安门',
-    zIndex: '1',
+    // zIndex: '1',
     iconPath: '../../../static/location.png',
     width: 40,
     height: 40,
@@ -192,14 +102,13 @@
       bgColor: '#CCFF11',
       padding: 5,
       display: 'ALWAYS'
-    }
+    } as MapMarkerCallout
   },
   {
     id: 2,
     latitude: 39.894793,
     longitude: 116.321592,
     title: '北京西站',
-    zIndex: '1',
     iconPath: '../../../static/location.png',
     width: 40,
     height: 40,
@@ -217,14 +126,13 @@
       bgColor: '#ff5500',
       padding: 5,
       display: 'ALWAYS'
-    }
+    } as MapMarkerCallout
   },
   {
     id: 3,
     latitude: 39.902344,
     longitude: 116.484822,
     title: '北京东站',
-    zIndex: '1',
     iconPath: '../../../static/location.png',
     width: 20,
     height: 20,
@@ -242,14 +150,13 @@
       bgColor: '#ff5500',
       padding: 5,
       display: 'ALWAYS'
-    }
+    } as MapMarkerCallout
   },
   {
     id: 4,
     latitude: 39.865011,
     longitude: 116.379007,
     title: '北京南站',
-    zIndex: '1',
     iconPath: '../../../static/location.png',
     width: 40,
     height: 40,
@@ -267,12 +174,12 @@
       bgColor: '#00aa00',
       padding: 5,
       display: 'ALWAYS'
-    }
+    } as MapMarkerCallout
   },
   ];
 
 
-  const testPolyline = [{
+  const testPolyline: Polyline[] = [{
     points: [{
       latitude: 39.925539,
       longitude: 116.279037
@@ -318,7 +225,7 @@
   }
   ];
 
-  const testPolygons = [{
+  const testPolygons : Polygon[] = [{
     points: [{
       latitude: 39.781892,
       longitude: 116.293413
@@ -365,7 +272,7 @@
   }
   ];
 
-  const testCircles = [{
+  const testCircles: Circle[] = [{
     latitude: 39.996441,
     longitude: 116.411146,
     radius: 15000,
@@ -391,7 +298,7 @@
   }
   ];
 
-  const testIncludePoints = [{
+  const testIncludePoints :LocationObject[] = [{
     latitude: 39.989631,
     longitude: 116.481018,
   },
@@ -402,8 +309,8 @@
   ];
 
 
-  const map = ref(null as MapContext | null);
-  const location = ref({ longitude: 116.39742, latitude: 39.909 });
+  const mapContext = ref(null as MapContext | null);
+  const location = ref({ longitude: 116.39742, latitude: 39.909 } as LocationObject);
   const rotate = ref(0);
   const skew = ref(0);
   // 自动化测试
@@ -434,7 +341,7 @@
 
 
   onReady(() => {
-    map.value = uni.createMapContext("map1", getCurrentInstance()!.proxy!)
+    mapContext.value = uni.createMapContext("map1", getCurrentInstance()!.proxy!)
   });
 
   const scale = ref(13);
@@ -442,19 +349,19 @@
     scale.value = value
   };
 
-  const controls = ref([] as ControlsType[]);
+  const controls = ref([] as Control[]);
   const addControls = () => {
-    controls.value.push({
+    controls.value = [{
       id: 1,
       position: {
         left: 5,
         top: 180,
         width: 30,
         height: 30
-      },
+      } as ControlPosition,
       iconPath: '../../../static/uni.png',
       clickable: true
-    })
+    } as Control]
   }
 
   const showLocation = ref(false);
@@ -462,31 +369,34 @@
     showLocation.value = checked
   }
 
-  const includePoints = ref([] as Points[]);
+  const includePoints = ref([] as LocationObject[]);
   const includePoint = () => {
     includePoints.value = testIncludePoints;
   };
 
 
-  const markers = reactive([] as Markers[]);
+  let markers = ref([] as Marker[]);
   const addMarkers = () => {
-    scale.value = 11
-    markers.push(...testMarkers);
+    scale.value = 11
+    const temp = JSON.parse<Marker[]>(JSON.stringify(testMarkers))!
+    markers.value = temp
   };
 
   const removeMarker = () => {
-    const index = markers.findIndex(marker => marker.id === 4);
-    if (index !== -1) {
-      delete markers[index].label;
-      markers.splice(index, 1);
-    }else{
-      uni.showToast({
-        title: '未找到该标记点',
-        icon: 'none'
-      });
+    const index = markers.value.findIndex((marker: Marker):boolean=>{
+       return marker.id == 4
+    });
+    if (index != -1) {
+      mapContext.value?.removeMarkers({markerIds:[4]})
+    } else {
+      uni.showToast({
+        title: '未找到该标记点',
+        icon: 'none'
+      });
     }
   };
-
+
+  // #ifdef WEB
   const addMarkersLabel = () => {
     markers.forEach((marker, index) => {
       marker.label = {
@@ -502,41 +412,42 @@
         padding: 10
       };
     });
-  };
+  };
+  // #endif
 
 
   const polyline = ref([] as Polyline[]);
   const addPolyline = () => {
-    scale.value = 11;
-    polyline.value = testPolyline;
+    scale.value = 11;
+    polyline.value = JSON.parse<Polyline[]>(JSON.stringify(testPolyline))!;
   };
   const removePolyline = () => {
     if (polyline.value.length > 1) {
-      polyline.value.splice(0, 1);
+      polyline.value = JSON.parse<Polyline[]>(JSON.stringify(testPolyline))!.splice(0, 1);
     }
   };
 
 
-  const polygons = ref([] as Polygons[]);
+  const polygons = ref([] as Polygon[]);
   const addPolygons = () => {
     scale.value = 10;
-    polygons.value = testPolygons;
+    polygons.value = JSON.parse<Polygon[]>(JSON.stringify(testPolygons))!;
   };
   const removePolygon = () => {
     if (polygons.value.length > 1) {
-      polygons.value.splice(0, 1);
+      polygons.value = JSON.parse<Polygon[]>(JSON.stringify(testPolygons))!.splice(0, 1);
     }
   };
 
 
-  const circles = ref([] as Circles[]);
+  const circles = ref([] as Circle[]);
   const addCircles = () => {
     scale.value = 10;
-    circles.value = testCircles;
+    circles.value = JSON.parse<Circle[]>(JSON.stringify(testCircles))!;
   };
   const removeCircle = () => {
     if (circles.value.length > 1) {
-      circles.value.splice(0, 1);
+      circles.value = JSON.parse<Circle[]>(JSON.stringify(testCircles))!.splice(0, 1);
     }
   };
 
@@ -582,8 +493,7 @@
 
 
   const handleGetCenterLocation = () => {
-    if (map.value) {
-      map.value.getCenterLocation({
+      mapContext.value?.getCenterLocation({
         success: ret => {
           // console.log('getCenterLocation',ret);
           jestResult.centerPoints = ret;
@@ -594,12 +504,10 @@
           }
         }
       });
-    }
   };
 
   const handleGetRegion = () => {
-    if (map.value) {
-      map.value.getRegion({
+      mapContext.value?.getRegion({
         success: ret => {
           // console.log('getRegion',JSON.stringify(ret));
           jestResult.southwest = ret.southwest;
@@ -611,34 +519,34 @@
           }
         }
       });
-    }
   };
 
 
   const handleTranslateMarker = () => {
-    if (map.value) {
-      map.value.translateMarker({
+      mapContext.value?.translateMarker({
         markerId: 1,
         destination: {
           latitude: 39.989631,
           longitude: 116.481018
-        },
+        },
         autoRotate: true,
         rotate: 10,
-        duration: 2000,
-        animationEnd: () => {
-          // console.log('动画结束');
-          jestResult.animationEnd = true;
-        },
+        duration: 2000,
+        moveWithRotate: true,
+        // animationEnd: () => {
+        //   // console.log('动画结束');
+        //   jestResult.animationEnd = true;
+        // },
         success: ret => {
-          // console.log('handleTranslateMarker',JSON.stringify(ret));
-          jestResult.translateMarkerMsg = ret.errMsg;
+          console.log('handleTranslateMarker',JSON.stringify(ret));
+          const result = ret as UTSJSONObject
+          jestResult.translateMarkerMsg = result["errMsg"] as string;
         },
         fail: error => {
           console.log(error)
         }
       });
-      map.value.translateMarker({
+      mapContext.value?.translateMarker({
         markerId: 2,
         destination: {
           latitude: 39.902344,
@@ -648,19 +556,17 @@
         rotate: 0,
         duration: 2000,
         success: ret => {
-          console.log('handleTranslateMarker',JSON.stringify(ret));
+          console.log('handleTranslateMarker', JSON.stringify(ret));
         },
         fail: error => {
           console.log(error)
         }
       });
-    }
   };
 
 
   const handleGetScale = () => {
-    if (map.value) {
-      map.value.getScale({
+      mapContext.value?.getScale({
         success: res => {
           // console.log('getScale',res);
           scale.value = res.scale
@@ -675,17 +581,17 @@
           console.log(error)
         },
       });
-    }
   };
 
   const handleMoveToLocation = () => {
-    if (map.value) {
-      map.value.moveToLocation({
+      mapContext.value?.moveToLocation({
         latitude: 39.909,
         longitude: 116.39742,
         success: res => {
-          // console.log('moveToLocation',res);
-          jestResult.moveToLocationMsg = res.errMsg;
+          console.log('moveToLocation',res);
+          const result = res as UTSJSONObject
+          jestResult.moveToLocationMsg = result["errMsg"] as string;
+
           if (!autoTest.value) {
             uni.showModal({
               content: JSON.stringify(res)
@@ -696,24 +602,23 @@
           console.log(error)
         }
       });
-    }
   };
 
-  const maptap = (e : UniEvent) => {
+  const maptap = (e : UniMapUpdatedEvent) => {
     // console.log('点击地图时触发',e)
     uni.showModal({
       content: JSON.stringify(e)
     });
   };
 
-  const onmarkertap = (e : UniEvent) => {
+  const onmarkertap = (e : UniMapMarkerTapEvent) => {
     // console.log('点击标记点时触发',e)
     uni.showModal({
       content: JSON.stringify(e)
     });
   };
 
-  const oncontroltap = (e : UniEvent) => {
+  const oncontroltap = (e : UniMapControlTapEvent) => {
     // console.log('点击控件时触发',e)
     uni.showModal({
       content: JSON.stringify(e)
@@ -727,15 +632,15 @@
     });
   };
 
-  const onupdated = (e : UniEvent) => {
+  const onupdated = (e : UniMapUpdatedEvent) => {
     console.log('在地图渲染更新完成时触发', e)
   };
 
-  const onregionchange = (e : UniEvent) => {
+  const onregionchange = (e : UniMapRegionChangeEvent) => {
     console.log('视野发生变化时触发', e)
   };
 
-  const onpoitap = (e : UniEvent) => {
+  const onpoitap = (e : UniMapPoiTapEvent) => {
     // console.log('点击地图poi点时触发',e)
     uni.showModal({
       content: JSON.stringify(e)
@@ -747,8 +652,10 @@
     autoTest,
     updateAutoTest,
     addControls,
-    addMarkers,
-    addMarkersLabel,
+    addMarkers,
+    // #ifdef WEB
+    addMarkersLabel,
+    // #endif
     removeMarker,
     addPolyline,
     removePolyline,
-- 
GitLab