补充web端的map示例

pages/component/map/map.uvue

 <template>
   <view class="content">
-    <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"
+    <map class="map" id="map1" ref="map1" :longitude="location.longitude" :latitude="location.latitude" :scale="scale" :markers="markers" :include-points="includePoints" :polyline="polyline" :polygons="polygons" :circles="circles" :controls="controls" :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"
-      :enable-traffic="enableTraffic" :markers="markers" :polyline="polyline" :circles="circles" :polygons="polygons"
-      :include-points="includePoints" @tap="maptap" @controltap="oncontroltap" @markertap="onmarkertap"
-      @callouttap="oncallouttap" @poitap="onpoitap" @updated="onupdated" @regionchange="onregionchange"></map>
+      :enable-traffic="enableTraffic"
+      @markertap="onmarkertap" @callouttap="oncallouttap" @controltap="oncontroltap" @regionchange="onregionchange" @tap="maptap"
+      @updated="onupdated" @poitap="onpoitap"></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>
+      <input-data defaultValue="13" title="scale: 缩放级别，取值范围为5-18" type="number" @confirm="confirm_scale_input"></input-data>
       <boolean-data :defaultValue="showLocation" title="开启显示带有方向的当前定位点" @change="change_show_location"></boolean-data>
 
       <button class="button" @click="addControls">控件</button>
       <button class="button" @click="addMarkers">标记点</button>
+      <button class="button" @click="addMarkersLabel">为标记点旁边增加标签</button>
       <button class="button" @click="addPolyline">路线</button>
       <button class="button" @click="addPolygons">多边形</button>
       <button class="button" @click="addCircles">圆</button>
@@ -25,7 +26,10 @@
       </View>
       <button class="button" @click="handleGetCenterLocation">获取当前地图中心的经纬度</button>
       <button class="button" @click="handleGetRegion">获取当前地图的视野范围</button>
-      <button class="button" @click="handleTranslateMarker">平移marker，带动画</button>
+      <button class="button" @click="handleTranslateMarker">平移marker</button>
+      <button class="button" @click="handleMoveToLocation">将地图中心移动到当前定位点</button>
+      <button class="button" @click="handleGetScale">获取当前地图的缩放级别</button>
+
     </scroll-view>
   </view>
 </template>
@@ -44,20 +48,34 @@
     borderWidth : number,
     borderColor : string,
     bgColor : string,
-    padding : 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
-    zIndex ?: string,
+    title ?: string,
     iconPath : string,
+    zIndex ?: string,
     rotate ?: number,
     width ?: number,
     height ?: number,
+    label?:Label,
     anchor ?: Anchor,
     callout ?: Callout
   }
@@ -94,6 +112,20 @@
     fillColor : string;
   }
 
+  type PositionType = {
+  	left: number,
+  	top: number,
+  	width: number,
+  	height: number
+  }
+
+  type ControlsType = {
+  	id?: number;
+  	position: PositionType;
+    iconPath:string;
+  	clickable?: boolean;
+  }
+
   const testMarkers = [{
     id: 0,
     latitude: 39.989631,
@@ -116,7 +148,7 @@
       borderWidth: 1,
       borderColor: '#333300',
       bgColor: '#CCFF99',
-      padding: '5',
+      padding: 5,
       display: 'ALWAYS'
     }
   },
@@ -137,16 +169,17 @@
       content: '首都北京\n天安门',
       color: '#00BFFF',
       fontSize: 12,
-      borderRadius: 2,
-      borderWidth: 0,
+      borderRadius:10,
+      borderWidth: 2,
       borderColor: '#333300',
       bgColor: '#CCFF11',
-      padding: '1',
+      padding: 5,
       display: 'ALWAYS'
     }
   }
   ];
 
+
   const testPolyline = [{
     points: [{
       latitude: 39.925539,
@@ -157,7 +190,7 @@
       longitude: 116.520285
     }],
     color: '#FFCCFF',
-    width: 7,
+    width:7,
     dottedLine: true,
     arrowLine: true,
     borderColor: '#000000',
@@ -186,7 +219,7 @@
     }],
     color: '#CCFFFF',
     width: 5,
-    dottedLine: true,
+    dottedLine: false,
     arrowLine: true,
     borderColor: '#CC0000',
     borderWidth: 3
@@ -276,50 +309,25 @@
   }
   ];
 
-  type ControlsType = {
-  	id?: number;
-  	position: PositionType;
-    iconPath:string;
-  	clickable?: boolean;
-  }
-
-  type PositionType = {
-  	left: number,
-  	top: number,
-  	width: number,
-  	height: number
-  }
 
+  const map = ref(null as MapContext | null);
   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({});
 
   onReady(() => {
     map.value = uni.createMapContext("map1", getCurrentInstance()!.proxy!)
   });
 
+  const scale = ref(13);
+  const confirm_scale_input = (value: number) => {
+    scale.value = value
+  };
+
+  const controls = ref([]as ControlsType[]);
   const addControls = () => {
-    controls.value = [{
+    controls.value.push({
       id: 1,
       position: {
         left: 5,
@@ -329,16 +337,72 @@
       },
       iconPath: '../../../static/uni.png',
       clickable: true
-    }]
+    })
   }
-  const confirm_scale_input = (value: number) => {
-    scale.value = value
-  };
 
+  const showLocation = ref(false);
   const change_show_location = (checked : boolean)=>{
     showLocation.value = checked
   }
 
+  const includePoints = ref([] as Points[]);
+  const includePoint = () => {
+    includePoints.value = testIncludePoints;
+  };
+
+
+  const markers = reactive([] as Markers[]);
+  const addMarkers = () => {
+    markers.push(...testMarkers);
+  };
+
+  const addMarkersLabel = () => {
+    markers.forEach((marker, index) => {
+      marker.label = {
+        content: 'Hello Label'+ (index + 1),
+        color: '#aa00ff',
+        fontSize: 12,
+        x: 5,
+        y: 0,
+        borderColor:'#333300',
+        borderWidth:2,
+        borderRadius: 20,
+        bgColor: '#aaffff',
+        padding: 10
+      };
+    });
+  };
+
+
+  const polyline = ref([] as Polyline[]);
+  const addPolyline = () => {
+    scale.value = 12;
+    polyline.value = testPolyline;
+  };
+
+
+  const polygons = ref([] as Polygons[]);
+  const addPolygons = () => {
+    scale.value = 10;
+    polygons.value = testPolygons;
+  };
+
+
+  const circles = ref([] as Circles[]);
+  const addCircles = () => {
+    scale.value = 10;
+    circles.value = testCircles;
+  };
+
+  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 enableThreeD = (e)=>{
     enable3D.value = e.detail.value;
   }
@@ -369,55 +433,42 @@
     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 getCenterLocationTest = ref({});
   const handleGetCenterLocation = () => {
     if (map.value) {
       map.value.getCenterLocation({
         success: ret => {
-          console.log('getCenterLocation',ret);
-          // console.log(JSON.stringify(ret));
+          // console.log('getCenterLocation',ret);
           getCenterLocationTest.value = ret;
-          uni.showModal({
-            content: JSON.stringify(ret)
-          });
+          if(!autoTest.value){
+            uni.showModal({
+              content: JSON.stringify(ret)
+            });
+          }
         }
       });
     }
   };
 
+  const getRegionTest = ref({});
   const handleGetRegion = () => {
     if (map.value) {
       map.value.getRegion({
         success: ret => {
-          console.log(JSON.stringify(ret));
+          // console.log('getRegion',JSON.stringify(ret));
           getRegionTest.value = ret;
-          uni.showModal({
-            content: JSON.stringify(ret)
-          });
+          if(!autoTest.value){
+            uni.showModal({
+              content: JSON.stringify(ret)
+            });
+          }
         }
       });
     }
   };
 
+
   const handleTranslateMarker = () => {
     if (map.value) {
       map.value.translateMarker({
@@ -435,35 +486,76 @@
         success: ret => {
           console.log('handleTranslateMarker',JSON.stringify(ret));
         },
-        fail: ret => {
-          console.log('handleTranslateMarker',JSON.stringify(ret));
+        fail: error => {
+          console.log(error)
         }
       });
     }
   };
 
-  const maptap = (e) => {
+
+  const handleGetScale = () => {
+    if (map.value) {
+      map.value.getScale({
+        success: res => {
+            // console.log('getScale',res);
+            scale.value = res.scale
+            if(!autoTest.value){
+              uni.showModal({
+                content: '当前地图的缩放级别为：'+ res.scale
+              });
+            }
+        },
+        fail: error => {
+            console.log(error)
+        },
+      });
+    }
+  };
+
+  const handleMoveToLocation = () => {
+    if (map.value) {
+      map.value.moveToLocation({
+          latitude: 39.909,
+          longitude: 116.39742,
+          success: res => {
+            // console.log('moveToLocation',res);
+            if(!autoTest.value){
+              uni.showModal({
+                content: JSON.stringify(res)
+              });
+            }
+          },
+          fail: error => {
+            console.log(error)
+          }
+      });
+    }
+  };
+
+  const maptap = (e:UniEvent) => {
+    // console.log('点击地图时触发',e)
     uni.showModal({
       content: JSON.stringify(e)
     });
   };
 
   const onmarkertap = (e:UniEvent) => {
-    console.log('点击标记点时触发',e)
+    // console.log('点击标记点时触发',e)
     uni.showModal({
       content: JSON.stringify(e)
     });
   };
 
   const oncontroltap = (e:UniEvent) => {
-    console.log('点击控件时触发',e)
+    // console.log('点击控件时触发',e)
     uni.showModal({
       content: JSON.stringify(e)
     });
   };
 
   const oncallouttap = (e:UniEvent) => {
-    console.log('点击标记点对应的气泡时触发',e)
+    // console.log('点击标记点对应的气泡时触发',e)
     uni.showModal({
       content: JSON.stringify(e)
     });
@@ -477,7 +569,8 @@
     console.log('视野发生变化时触发',e)
   };
 
-  const onpoitap = (e) => {
+  const onpoitap = (e:UniEvent) => {
+    // console.log('点击地图poi点时触发',e)
     uni.showModal({
       content: JSON.stringify(e)
     });