map页面改成组合式

pages/component/map/map.uvue

 <template>
   <view class="content">
-    <map class="map" id="map1" ref="map1" :controls="controls" :scale="scale" :longitude="location.longitude"
+    <map class="map" id="map1" ref="map1" :controls="controls" :scale="scale" min-scale="3" max-scale="20" :longitude="location.longitude"
       :latitude="location.latitude" :show-location="showLocation" :enable-3D="enable3D" :rotate="rotate" :skew="skew"
       :show-compass="showCompass" :enable-overlooking="enableOverlooking" :enable-zoom="enableZoom"
       :enable-scroll="enableScroll" :enable-rotate="enableRotate" :enable-satellite="enableSatellite"
@@ -8,22 +8,29 @@
       :include-points="includePoints" @tap="maptap" @controltap="oncontroltap" @markertap="onmarkertap"
       @callouttap="oncallouttap" @poitap="onpoitap" @updated="onupdated" @regionchange="onregionchange"></map>
     <scroll-view class="scrollview" scroll-y="true">
+      <view class="uni-title">
+        <text class="uni-title-text">属性示例</text>
+      </View>
+      <input-data defaultValue="13" title="scale: 缩放级别，取值范围为3-20" type="number" @confirm="confirm_scale_input"></input-data>
+      <boolean-data :defaultValue="showLocation" title="开启显示带有方向的当前定位点" @change="change_show_location"></boolean-data>
 
-      <button class="button" @click="changeScale">changeScale</button>
-      <button class="button" @click="addMarkers">addMarkers</button>
-      <button class="button" @click="addPolyline">addPolyline</button>
-      <button class="button" @click="addPolygons">addPolygons</button>
-      <button class="button" @click="addCircles">addCircles</button>
-      <button class="button" @click="includePoint">includePoints</button>
-      <button class="button" @click="handleGetCenterLocation">getCenterLocation</button>
-      <button class="button" @click="handleGetRegion">getRegion</button>
-      <button class="button" @click="handleTranslateMarker">translateMarker</button>
-
+      <button class="button" @click="addControls">控件</button>
+      <button class="button" @click="addMarkers">标记点</button>
+      <button class="button" @click="addPolyline">路线</button>
+      <button class="button" @click="addPolygons">多边形</button>
+      <button class="button" @click="addCircles">圆</button>
+      <button class="button" @click="includePoint">缩放视野以包含所有给定的坐标点</button>
+      <view class="uni-title">
+        <text class="uni-title-text">方法示例</text>
+      </View>
+      <button class="button" @click="handleGetCenterLocation">获取当前地图中心的经纬度</button>
+      <button class="button" @click="handleGetRegion">获取当前地图的视野范围</button>
+      <button class="button" @click="handleTranslateMarker">平移marker，带动画</button>
     </scroll-view>
   </view>
 </template>
 
-<script lang="uts">
+<script setup lang="uts">
   type Anchor = {
     x : number,
     y : number
@@ -42,17 +49,17 @@
   }
 
   type Markers = {
-    id : string | number,
+    id : number,
     latitude : number,
     longitude : number,
-    title : string
-    zIndex : string,
+    title ?: string
+    zIndex ?: string,
     iconPath : string,
     rotate ?: number,
-    width : number,
-    height : number,
-    anchor : Anchor,
-    callout : Callout
+    width ?: number,
+    height ?: number,
+    anchor ?: Anchor,
+    callout ?: Callout
   }
 
   type Points = {
@@ -269,169 +276,213 @@
   }
   ];
 
-  export default {
-    data() {
-      return {
-        location: {
-          longitude: 116.3974770000,
-          latitude: 39.9086920000
-        },
-        controls: [{
-          id: 1,
-          position: {
-            left: 5,
-            top: 180,
-            width: 30,
-            height: 30
-          },
-          iconPath: '../../../static/uni.png',
-          clickable: true
-        }],
-        showLocation: false,
-        scale: 13,
-        showCompass: true,
-        enable3D: true,
-        enableOverlooking: true,
-        enableZoom: true,
-        enableScroll: true,
-        enableRotate: true,
-        enableSatellite: false,
-        enableTraffic: false,
-        polyline: [] as Polyline[],
-        markers: [] as Markers[],
-        polygons: [] as Polygons[],
-        circles: [] as Circles[],
-        includePoints: [] as Points[],
-        rotate: 0,
-        skew: 0,
-        map: null as MapContext | null,
-        // 自动化测试
-        autoTest: false,
-        getCenterLocationTest:{},
-        getRegionTest:{},
-      }
-    },
-    onReady() {
-      this.map = uni.createMapContext("map1", this);
-    },
-    methods: {
-      changeScale() {
-        this.scale = this.scale == 9 ? 15 : 9;
-      },
-      enableThreeD(e) {
-        this.enable3D = e.detail.value;
-      },
-      changeShowCompass(e) {
-        this.showCompass = e.detail.value;
-      },
-      changeEnableOverlooking(e) {
-        this.enableOverlooking = e.detail.value;
-      },
-      changeEnableZoom(e) {
-        this.enableZoom = e.detail.value;
-      },
-      changeEnableScroll(e) {
-        this.enableScroll = e.detail.value;
-      },
-      changeEnableRotate(e) {
-        this.enableRotate = e.detail.value;
-      },
-      changeEnableSatellite(e) {
-        this.enableSatellite = e.detail.value;
-      },
-      changeEnableTraffic(e) {
-        this.enableTraffic = e.detail.value;
-      },
-      addMarkers() {
-        this.markers = testMarkers;
-      },
-      addPolyline() {
-        this.polyline = testPolyline;
-      },
+  type ControlsType = {
+  	id?: number;
+  	position: PositionType;
+    iconPath:string;
+  	clickable?: boolean;
+  }
 
-      addPolygons() {
-        this.polygons = testPolygons;
-      },
+  type PositionType = {
+  	left: number,
+  	top: number,
+  	width: number,
+  	height: number
+  }
 
-      addCircles() {
-        this.circles = testCircles;
-      },
-      includePoint() {
-        this.includePoints = testIncludePoints;
-      },
-      handleGetCenterLocation() {
-        this.map!.getCenterLocation({
-          success: ret => {
-            console.log(JSON.stringify(ret));
-            this.getCenterLocationTest = ret
-            if(!this.autoTest){
-              uni.showModal({
-                content: JSON.stringify(ret)
-              })
-            }
-          }
-        })
-      },
-      handleGetRegion() {
-        this.map!.getRegion({
-          success: ret => {
-            console.log(JSON.stringify(ret));
-            this.getRegionTest = ret
-            if(!this.autoTest){
-              uni.showModal({
-                content: JSON.stringify(ret)
-              })
-            }
-          }
-        })
-      },
+  const location = ref({ longitude: 116.39742, latitude: 39.909 });
+  const controls = ref( []as ControlsType[]);
+  const showLocation = ref(false);
+  const scale = ref(13);
+  const showCompass = ref(true);
+  const enable3D = ref(true);
+  const enableOverlooking = ref(true);
+  const enableZoom = ref(true);
+  const enableScroll = ref(true);
+  const enableRotate = ref(true);
+  const enableSatellite = ref(false);
+  const enableTraffic = ref(false);
+  const polyline = ref([] as Polyline[]);
+  const markers = ref([] as Markers[]);
+  const polygons = ref([] as Polygons[]);
+  const circles = ref([] as Circles[]);
+  const includePoints = ref([] as Points[]);
+  const rotate = ref(0);
+  const skew = ref(0);
+  const map = ref(null as MapContext | null);
+  const autoTest = ref(false);
+  const getCenterLocationTest = ref({});
+  const getRegionTest = ref({});
 
-      handleTranslateMarker() {
-        this.map!.translateMarker({
-          markerId: 1,
-          destination: {
-            latitude: 39.989631,
-            longitude: 116.481018
-          },
-          duration: 2000,
-          success: ret => {
-            console.log(JSON.stringify(ret));
-          }
-        });
-      },
-      maptap(e) {
-        uni.showModal({
-          content: JSON.stringify(e)
-        })
-      },
-      onmarkertap(e) {
-        uni.showModal({
-          content: JSON.stringify(e)
-        })
-      },
-      oncontroltap(e) {
-        uni.showModal({
-          content: JSON.stringify(e)
-        })
-      },
-      oncallouttap(e) {
-        uni.showModal({
-          content: JSON.stringify(e)
-        })
-      },
-      onupdated(e) {
-        console.log(JSON.stringify(e))
-      },
-      onregionchange(e) {
-        console.log(JSON.stringify(e));
+  onReady(() => {
+    map.value = uni.createMapContext("map1", getCurrentInstance()!.proxy!)
+  });
+
+  const addControls = () => {
+    controls.value = [{
+      id: 1,
+      position: {
+        left: 5,
+        top: 180,
+        width: 30,
+        height: 30
       },
-      onpoitap(e) {
-        uni.showModal({
-          content: JSON.stringify(e)
-        })
-      }
-    }
+      iconPath: '../../../static/uni.png',
+      clickable: true
+    }]
   }
+  const confirm_scale_input = (value: number) => {
+    scale.value = value
+  };
+
+  const change_show_location = (checked : boolean)=>{
+    showLocation.value = checked
+  }
+
+  const enableThreeD = (e)=>{
+    enable3D.value = e.detail.value;
+  }
+  const changeShowCompass = (e)=>{
+    showCompass.value = e.detail.value;
+  }
+  const changeEnableOverlooking = (e) => {
+    enableOverlooking.value = e.detail.value;
+  };
+
+  const changeEnableZoom = (e) => {
+    enableZoom.value = e.detail.value;
+  };
+
+  const changeEnableScroll = (e) => {
+    enableScroll.value = e.detail.value;
+  };
+
+  const changeEnableRotate = (e) => {
+    enableRotate.value = e.detail.value;
+  };
+
+  const changeEnableSatellite = (e) => {
+    enableSatellite.value = e.detail.value;
+  };
+
+  const changeEnableTraffic = (e) => {
+    enableTraffic.value = e.detail.value;
+  };
+
+  const addMarkers = () => {
+    markers.value = testMarkers;
+  };
+
+  const addPolygons = () => {
+    polygons.value = testPolygons;
+  };
+
+  const addPolyline = () => {
+    polyline.value = testPolyline;
+  };
+
+  const addCircles = () => {
+    circles.value = testCircles;
+  };
+
+  const includePoint = () => {
+    includePoints.value = testIncludePoints;
+  };
+
+  const handleGetCenterLocation = () => {
+    if (map.value) {
+      map.value.getCenterLocation({
+        success: ret => {
+          console.log('getCenterLocation',ret);
+          // console.log(JSON.stringify(ret));
+          getCenterLocationTest.value = ret;
+          uni.showModal({
+            content: JSON.stringify(ret)
+          });
+        }
+      });
+    }
+  };
+
+  const handleGetRegion = () => {
+    if (map.value) {
+      map.value.getRegion({
+        success: ret => {
+          console.log(JSON.stringify(ret));
+          getRegionTest.value = ret;
+          uni.showModal({
+            content: JSON.stringify(ret)
+          });
+        }
+      });
+    }
+  };
+
+  const handleTranslateMarker = () => {
+    if (map.value) {
+      map.value.translateMarker({
+        markerId: 1,
+        destination: {
+          latitude: 39.989631,
+          longitude: 116.481018
+        },
+        autoRotate:true,
+        rotate:10,
+        duration: 2000,
+        animationEnd: () => {
+          console.log('动画结束');
+        },
+        success: ret => {
+          console.log('handleTranslateMarker',JSON.stringify(ret));
+        },
+        fail: ret => {
+          console.log('handleTranslateMarker',JSON.stringify(ret));
+        }
+      });
+    }
+  };
+
+  const maptap = (e) => {
+    uni.showModal({
+      content: JSON.stringify(e)
+    });
+  };
+
+  const onmarkertap = (e:UniEvent) => {
+    console.log('点击标记点时触发',e)
+    uni.showModal({
+      content: JSON.stringify(e)
+    });
+  };
+
+  const oncontroltap = (e:UniEvent) => {
+    console.log('点击控件时触发',e)
+    uni.showModal({
+      content: JSON.stringify(e)
+    });
+  };
+
+  const oncallouttap = (e:UniEvent) => {
+    console.log('点击标记点对应的气泡时触发',e)
+    uni.showModal({
+      content: JSON.stringify(e)
+    });
+  };
+
+  const onupdated = (e:UniEvent) => {
+    console.log('在地图渲染更新完成时触发',e)
+  };
+
+  const onregionchange = (e:UniEvent) => {
+    console.log('视野发生变化时触发',e)
+  };
+
+  const onpoitap = (e) => {
+    uni.showModal({
+      content: JSON.stringify(e)
+    });
+  };
+
 </script>
 
 <style>
@@ -441,7 +492,7 @@
 
   .map {
     width: 100%;
-    height: 250px;
+    height: 300px;
     background-color: #f0f0f0;
   }