From d83c298abc59b853406c1b8cbbbeb942652955cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E4=BA=9A=E7=90=AA?= <wangyaqi988@163.com>
Date: Thu, 8 Aug 2024 12:03:16 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20=E5=A2=9E=E5=8A=A0=E6=8F=90=E7=A4=BA?=
 =?UTF-8?q?=E4=BF=A1=E6=81=AF=EF=BC=8C=E6=A0=BC=E5=BC=8F=E5=8C=96=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../API/choose-location/choose-location.uvue  | 137 +++++-----
 pages/API/open-location/open-location.uvue    | 143 +++++-----
 pages/component/map/map.uvue                  | 256 +++++++++---------
 3 files changed, 278 insertions(+), 258 deletions(-)

diff --git a/pages/API/choose-location/choose-location.uvue b/pages/API/choose-location/choose-location.uvue
index c2f931a9..abe62953 100644
--- a/pages/API/choose-location/choose-location.uvue
+++ b/pages/API/choose-location/choose-location.uvue
@@ -1,72 +1,79 @@
 <template>
-	<view>
-		<page-head :title="title"></page-head>
-		<view class="uni-padding-wrap">
-			<view style="background:#FFFFFF; padding:40rpx;">
-				<view class="uni-hello-text uni-center">当前位置信息</view>
-				<block v-if="hasLocation === false">
-					<view class="uni-h2 uni-center uni-common-mt">未选择位置</view>
-				</block>
-				<block v-if="hasLocation === true">
-					<view class="uni-hello-text uni-center" style="margin-top:10px;">
-						{{locationAddress}}
-					</view>
-					<view class="uni-h2 uni-center uni-common-mt">
-						<text>E: {{location.longitude[0]}}°{{location.longitude[1]}}′</text>
-						<text>\nN: {{location.latitude[0]}}°{{location.latitude[1]}}′</text>
-					</view>
-				</block>
-			</view>
-			<view class="uni-btn-v">
-				<button type="primary" @tap="chooseLocation">选择位置</button>
-				<button @tap="clear">清空</button>
-			</view>
-		</view>
-	</view>
+  <view>
+    <page-head :title="title"></page-head>
+    <view class="uni-padding-wrap">
+      <view style="background:#FFFFFF; padding:40rpx;">
+        <view class="uni-hello-text uni-center">当前位置信息</view>
+        <block v-if="hasLocation === false">
+          <view class="uni-h2 uni-center uni-common-mt">未选择位置</view>
+        </block>
+        <block v-if="hasLocation === true">
+          <view class="uni-hello-text uni-center" style="margin-top:10px;">
+            {{locationAddress}}
+          </view>
+          <view class="uni-h2 uni-center uni-common-mt">
+            <text>E: {{location.longitude[0]}}°{{location.longitude[1]}}′</text>
+            <text>\nN: {{location.latitude[0]}}°{{location.latitude[1]}}′</text>
+          </view>
+        </block>
+      </view>
+      <view class="uni-btn-v">
+        <view class="tips">注意：需要正确配置地图服务商的Key才能正常选择位置</view>
+        <button type="primary" @tap="chooseLocation">选择位置</button>
+        <button @tap="clear">清空</button>
+      </view>
+    </view>
+  </view>
 </template>
 <script lang="uts">
-	function formatLocation(longitude, latitude) {
-		if (typeof longitude === 'string' && typeof latitude === 'string') {
-			longitude = parseFloat(longitude)
-			latitude = parseFloat(latitude)
-		}
-		longitude = longitude.toFixed(2)
-		latitude = latitude.toFixed(2)
-		return {
-			longitude: longitude.toString().split('.'),
-			latitude: latitude.toString().split('.')
-		}
-	}
-	export default {
-		data() {
-			return {
-				title: 'chooseLocation',
-				hasLocation: false,
-				location: {},
-				locationAddress: ''
-			}
-		},
-		methods: {
-			chooseLocation: function () {
-				uni.chooseLocation({
-					success: (res) => {
-            console.log(res,123)
-						this.hasLocation = true,
-						this.location = formatLocation(res.longitude, res.latitude),
-						this.locationAddress = res.address
-					}
-				})
-			},
-			clear: function () {
-				this.hasLocation = false
-			}
-		}
-	}
+  function formatLocation (longitude, latitude) {
+    if (typeof longitude === 'string' && typeof latitude === 'string') {
+      longitude = parseFloat(longitude)
+      latitude = parseFloat(latitude)
+    }
+    longitude = longitude.toFixed(2)
+    latitude = latitude.toFixed(2)
+    return {
+      longitude: longitude.toString().split('.'),
+      latitude: latitude.toString().split('.')
+    }
+  }
+  export default {
+    data () {
+      return {
+        title: 'chooseLocation',
+        hasLocation: false,
+        location: {},
+        locationAddress: ''
+      }
+    },
+    methods: {
+      chooseLocation: function () {
+        uni.chooseLocation({
+          success: (res) => {
+            console.log(res, 123)
+            this.hasLocation = true
+            this.location = formatLocation(res.longitude, res.latitude)
+            this.locationAddress = res.address
+          }
+        })
+      },
+      clear: function () {
+        this.hasLocation = false
+      }
+    }
+  }
 </script>
 
 <style>
-	.page-body-info {
-		padding-bottom: 0;
-		height: 440rpx;
-	}
+  .page-body-info {
+    padding-bottom: 0;
+    height: 440rpx;
+  }
+
+  .tips {
+    font-size: 12px;
+    margin-top: 15px;
+    opacity: .8;
+  }
 </style>
diff --git a/pages/API/open-location/open-location.uvue b/pages/API/open-location/open-location.uvue
index 0daef1a2..fe309007 100644
--- a/pages/API/open-location/open-location.uvue
+++ b/pages/API/open-location/open-location.uvue
@@ -1,75 +1,82 @@
 <template>
-	<view>
-		<page-head :title="title"></page-head>
-		<view class="uni-common-mt">
-			<form @submit="openLocation">
-				<view class="uni-list">
-					<view class="uni-list-cell">
-						<view class="uni-list-cell-left">
-							<view class="uni-label">经度</view>
-						</view>
-						<view class="uni-list-cell-db">
-							<input class="uni-input" type="text" :disabled="true" value="116.39747" name="longitude"/>
-						</view>
-					</view>
-					<view class="uni-list-cell">
-						<view class="uni-list-cell-left">
-							<view class="uni-label">纬度</view>
-						</view>
-						<view class="uni-list-cell-db">
-							<input class="uni-input" type="text" :disabled="true" value="39.9085" name="latitude"/>
-						</view>
-					</view>
-					<view class="uni-list-cell">
-						<view class="uni-list-cell-left">
-							<view class="uni-label">位置名称</view>
-						</view>
-						<view class="uni-list-cell-db">
-							<input class="uni-input" type="text" :disabled="true" value="天安门" name="name"/>
-						</view>
-					</view>
-					<view class="uni-list-cell">
-						<view class="uni-list-cell-left">
-							<view class="uni-label">详细位置</view>
-						</view>
-						<view class="uni-list-cell-db">
-							<input class="uni-input" type="text" :disabled="true" value="北京市东城区东长安街" name="address"/>
-						</view>
-					</view>
-				</view>
-				<view class="uni-padding-wrap">
-					<view class="uni-btn-v uni-common-mt">
-						<button type="primary" formType="submit">查看位置</button>
-					</view>
-				</view>
-			</form>
-		</view>
-	</view>
+  <view>
+    <page-head :title="title"></page-head>
+    <view class="uni-common-mt">
+      <form @submit="openLocation">
+        <view class="uni-list">
+          <view class="uni-list-cell">
+            <view class="uni-list-cell-left">
+              <view class="uni-label">经度</view>
+            </view>
+            <view class="uni-list-cell-db">
+              <input class="uni-input" type="text" :disabled="true" value="116.39747" name="longitude" />
+            </view>
+          </view>
+          <view class="uni-list-cell">
+            <view class="uni-list-cell-left">
+              <view class="uni-label">纬度</view>
+            </view>
+            <view class="uni-list-cell-db">
+              <input class="uni-input" type="text" :disabled="true" value="39.9085" name="latitude" />
+            </view>
+          </view>
+          <view class="uni-list-cell">
+            <view class="uni-list-cell-left">
+              <view class="uni-label">位置名称</view>
+            </view>
+            <view class="uni-list-cell-db">
+              <input class="uni-input" type="text" :disabled="true" value="天安门" name="name" />
+            </view>
+          </view>
+          <view class="uni-list-cell">
+            <view class="uni-list-cell-left">
+              <view class="uni-label">详细位置</view>
+            </view>
+            <view class="uni-list-cell-db">
+              <input class="uni-input" type="text" :disabled="true" value="北京市东城区东长安街" name="address" />
+            </view>
+          </view>
+        </view>
+        <view class="uni-padding-wrap">
+          <view class="tips">注意：需要正确配置地图服务商的Key才能正常显示位置</view>
+          <view class="uni-btn-v uni-common-mt">
+            <button type="primary" formType="submit">查看位置</button>
+          </view>
+        </view>
+      </form>
+    </view>
+  </view>
 </template>
 <script lang="uts">
-	export default {
-		data() {
-			return {
-				title: 'openLocation'
-			}
-		},
-		methods: {
-			openLocation: function (e) {
-				console.log(e)
-				var value = e.detail.value
-				uni.openLocation({
-					longitude: Number(value.longitude),
-					latitude: Number(value.latitude),
-					name: value.name,
-					address: value.address
-				})
-			}
-		}
-	}
+  export default {
+    data () {
+      return {
+        title: 'openLocation'
+      }
+    },
+    methods: {
+      openLocation: function (e) {
+        console.log(e)
+        var value = e.detail.value
+        uni.openLocation({
+          longitude: Number(value.longitude),
+          latitude: Number(value.latitude),
+          name: value.name,
+          address: value.address
+        })
+      }
+    }
+  }
 </script>
 
 <style>
-	.uni-list-cell-left {
-		padding: 0 30rpx;
-	}
+  .uni-list-cell-left {
+    padding: 0 30rpx;
+  }
+
+  .tips {
+    font-size: 12px;
+    margin-top: 15px;
+    opacity: .8;
+  }
 </style>
diff --git a/pages/component/map/map.uvue b/pages/component/map/map.uvue
index b4e35c99..bb4fcefb 100644
--- a/pages/component/map/map.uvue
+++ b/pages/component/map/map.uvue
@@ -1,18 +1,19 @@
 <template>
   <view class="content">
-    <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"
+    <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"
-      @markertap="onmarkertap" @callouttap="oncallouttap" @controltap="oncontroltap" @regionchange="onregionchange" @tap="maptap"
-      @updated="onupdated" @poitap="onpoitap"></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>注意：需要正确配置地图服务商的Key才能正常显示地图组件</view>
+      <view class="tips">注意：需要正确配置地图服务商的Key才能正常显示地图组件</view>
       <view class="uni-title">
         <text class="uni-title-text">属性示例</text>
       </View>
-      <input-data defaultValue="13" title="scale: 缩放级别，取值范围为5-18" 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>
@@ -37,104 +38,104 @@
 
 <script setup lang="uts">
   type Anchor = {
-    x : number,
-    y : number
+    x: number,
+    y: number
   }
 
   type Callout = {
-    content : string,
-    color : string,
-    fontSize : number,
-    borderRadius : number,
-    borderWidth : number,
-    borderColor : string,
-    bgColor : string,
-    padding : number,
-    display : string
+    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,
+    content: string,
+    color: string,
+    fontSize: number,
+    x: number,
+    y: number,
     borderColor: string
-    borderWidth : number,
+    borderWidth: number,
     borderRadius: number,
-    bgColor : string,
-    padding: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
+    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
+    latitude: number,
+    longitude: number
   }
 
   type Polyline = {
-    points : Points[],
-    color : string,
-    width : number,
-    dottedLine : boolean,
-    arrowLine : boolean,
-    borderColor : string,
-    borderWidth : number
+    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;
+    points: Points[];
+    fillColor: string;
+    strokeWidth: number;
+    strokeColor: string;
+    zIndex: number;
   }
 
   type Circles = {
-    latitude : number;
-    longitude : number;
-    radius : number;
-    strokeWidth : number;
-    color : string;
-    fillColor : string;
+    latitude: number;
+    longitude: number;
+    radius: number;
+    strokeWidth: number;
+    color: string;
+    fillColor: string;
   }
 
   type PositionType = {
-  	left: number,
-  	top: number,
-  	width: number,
-  	height: number
+    left: number,
+    top: number,
+    width: number,
+    height: number
   }
 
   type ControlsType = {
-  	id?: number;
-  	position: PositionType;
-    iconPath:string;
-  	clickable?: boolean;
+    id?: number;
+    position: PositionType;
+    iconPath: string;
+    clickable?: boolean;
   }
 
   type TypeJestResult = {
-    translateMarkerMsg:string,
-    animationEnd:boolean,
+    translateMarkerMsg: string,
+    animationEnd: boolean,
     centerPoints: Points,
     southwest: Points,
     northeast: Points,
-    moveToLocationMsg:string,
-    scale:number
+    moveToLocationMsg: string,
+    scale: number
   }
 
   const testMarkers = [{
@@ -180,7 +181,7 @@
       content: '首都北京\n天安门',
       color: '#00BFFF',
       fontSize: 12,
-      borderRadius:10,
+      borderRadius: 10,
       borderWidth: 2,
       borderColor: '#333300',
       bgColor: '#CCFF11',
@@ -201,7 +202,7 @@
       longitude: 116.520285
     }],
     color: '#FFCCFF',
-    width:7,
+    width: 7,
     dottedLine: true,
     arrowLine: true,
     borderColor: '#000000',
@@ -333,22 +334,22 @@
 
 
   const jestResult = reactive({
-    translateMarkerMsg:"",
-    animationEnd:false,
+    translateMarkerMsg: "",
+    animationEnd: false,
     centerPoints: {
-      latitude : 0,
-      longitude : 0
+      latitude: 0,
+      longitude: 0
     },
     southwest: {
-      latitude : 0,
-      longitude : 0
+      latitude: 0,
+      longitude: 0
     },
     northeast: {
-      latitude : 0,
-      longitude : 0
+      latitude: 0,
+      longitude: 0
     },
-    moveToLocationMsg:"",
-    scale:0,
+    moveToLocationMsg: "",
+    scale: 0,
   } as TypeJestResult);
 
 
@@ -361,7 +362,7 @@
     scale.value = value
   };
 
-  const controls = ref([]as ControlsType[]);
+  const controls = ref([] as ControlsType[]);
   const addControls = () => {
     controls.value.push({
       id: 1,
@@ -377,7 +378,7 @@
   }
 
   const showLocation = ref(false);
-  const change_show_location = (checked : boolean)=>{
+  const change_show_location = (checked: boolean) => {
     showLocation.value = checked
   }
 
@@ -395,13 +396,13 @@
   const addMarkersLabel = () => {
     markers.forEach((marker, index) => {
       marker.label = {
-        content: 'Hello Label'+ (index + 1),
+        content: 'Hello Label' + (index + 1),
         color: '#aa00ff',
         fontSize: 12,
         x: 5,
         y: 0,
-        borderColor:'#333300',
-        borderWidth:2,
+        borderColor: '#333300',
+        borderWidth: 2,
         borderRadius: 20,
         bgColor: '#aaffff',
         padding: 10
@@ -439,10 +440,10 @@
   const enableSatellite = ref(false);
   const enableTraffic = ref(false);
 
-  const enableThreeD = (e)=>{
+  const enableThreeD = (e) => {
     enable3D.value = e.detail.value;
   }
-  const changeShowCompass = (e)=>{
+  const changeShowCompass = (e) => {
     showCompass.value = e.detail.value;
   }
   const changeEnableOverlooking = (e) => {
@@ -476,7 +477,7 @@
         success: ret => {
           // console.log('getCenterLocation',ret);
           jestResult.centerPoints = ret;
-          if(!autoTest.value){
+          if (!autoTest.value) {
             uni.showModal({
               content: JSON.stringify(ret)
             });
@@ -493,7 +494,7 @@
           // console.log('getRegion',JSON.stringify(ret));
           jestResult.southwest = ret.southwest;
           jestResult.northeast = ret.northeast
-          if(!autoTest.value){
+          if (!autoTest.value) {
             uni.showModal({
               content: JSON.stringify(ret)
             });
@@ -512,8 +513,8 @@
           latitude: 39.989631,
           longitude: 116.481018
         },
-        autoRotate:true,
-        rotate:10,
+        autoRotate: true,
+        rotate: 10,
         duration: 2000,
         animationEnd: () => {
           // console.log('动画结束');
@@ -535,17 +536,17 @@
     if (map.value) {
       map.value.getScale({
         success: res => {
-            // console.log('getScale',res);
-            scale.value = res.scale
-            jestResult.scale = res.scale
-            if(!autoTest.value){
-              uni.showModal({
-                content: '当前地图的缩放级别为：'+ res.scale
-              });
-            }
+          // console.log('getScale',res);
+          scale.value = res.scale
+          jestResult.scale = res.scale
+          if (!autoTest.value) {
+            uni.showModal({
+              content: '当前地图的缩放级别为：' + res.scale
+            });
+          }
         },
         fail: error => {
-            console.log(error)
+          console.log(error)
         },
       });
     }
@@ -554,61 +555,61 @@
   const handleMoveToLocation = () => {
     if (map.value) {
       map.value.moveToLocation({
-          latitude: 39.909,
-          longitude: 116.39742,
-          success: res => {
-            // console.log('moveToLocation',res);
-            jestResult.moveToLocationMsg = res.errMsg;
-            if(!autoTest.value){
-              uni.showModal({
-                content: JSON.stringify(res)
-              });
-            }
-          },
-          fail: error => {
-            console.log(error)
+        latitude: 39.909,
+        longitude: 116.39742,
+        success: res => {
+          // console.log('moveToLocation',res);
+          jestResult.moveToLocationMsg = res.errMsg;
+          if (!autoTest.value) {
+            uni.showModal({
+              content: JSON.stringify(res)
+            });
           }
+        },
+        fail: error => {
+          console.log(error)
+        }
       });
     }
   };
 
-  const maptap = (e:UniEvent) => {
+  const maptap = (e: UniEvent) => {
     // console.log('点击地图时触发',e)
     uni.showModal({
       content: JSON.stringify(e)
     });
   };
 
-  const onmarkertap = (e:UniEvent) => {
+  const onmarkertap = (e: UniEvent) => {
     // console.log('点击标记点时触发',e)
     uni.showModal({
       content: JSON.stringify(e)
     });
   };
 
-  const oncontroltap = (e:UniEvent) => {
+  const oncontroltap = (e: UniEvent) => {
     // console.log('点击控件时触发',e)
     uni.showModal({
       content: JSON.stringify(e)
     });
   };
 
-  const oncallouttap = (e:UniEvent) => {
+  const oncallouttap = (e: UniEvent) => {
     // console.log('点击标记点对应的气泡时触发',e)
     uni.showModal({
       content: JSON.stringify(e)
     });
   };
 
-  const onupdated = (e:UniEvent) => {
-    console.log('在地图渲染更新完成时触发',e)
+  const onupdated = (e: UniEvent) => {
+    console.log('在地图渲染更新完成时触发', e)
   };
 
-  const onregionchange = (e:UniEvent) => {
-    console.log('视野发生变化时触发',e)
+  const onregionchange = (e: UniEvent) => {
+    console.log('视野发生变化时触发', e)
   };
 
-  const onpoitap = (e:UniEvent) => {
+  const onpoitap = (e: UniEvent) => {
     // console.log('点击地图poi点时触发',e)
     uni.showModal({
       content: JSON.stringify(e)
@@ -632,7 +633,6 @@
     handleMoveToLocation,
     handleGetScale
   })
-
 </script>
 
 <style>
@@ -666,4 +666,10 @@
     margin-top: 5px;
     margin-bottom: 5px;
   }
+
+  .tips {
+    font-size: 12px;
+    margin-top: 15px;
+    opacity: .8;
+  }
 </style>
-- 
GitLab