同步uni1 web端api示例（地图选择/查看位置）

pages.json

@@ -400,6 +400,20 @@
         "navigationBarTitleText" : "editor"
       }
     },
+    {
+      "path" : "pages/API/open-location/open-location",
+      "style" :
+      {
+        "navigationBarTitleText" : "open-location"
+      }
+    },
+    {
+      "path" : "pages/API/choose-location/choose-location",
+      "style" :
+      {
+        "navigationBarTitleText" : "choose-location"
+      }
+    },
     // #endif
     {
       "path": "pages/component/list-view/issue-2199",

pages/API/choose-location/choose-location.uvue

+<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>
+</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
+			}
+		}
+	}
+</script>
+
+<style>
+	.page-body-info {
+		padding-bottom: 0;
+		height: 440rpx;
+	}
+</style>

pages/API/open-location/open-location.uvue

+<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>
+</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
+				})
+			}
+		}
+	}
+</script>
+
+<style>
+	.uni-list-cell-left {
+		padding: 0 30rpx;
+	}
+</style>

pages/tabBar/API.uvue

@@ -206,13 +206,13 @@
                 name: 'showToast轻提示框',
                 url: 'toast',
                 api: ["showToast"]
-              }
-              // #ifdef APP
-              ,{
-                name: '主题切换',
-                url: 'theme-change',
-                api: ["setAppTheme","onOsThemeChange","offOsThemeChange","onAppThemeChange","offAppThemeChange"]
-              }
+              }
+              // #ifdef APP
+              ,{
+                name: '主题切换',
+                url: 'theme-change',
+                api: ["setAppTheme","onOsThemeChange","offOsThemeChange","onAppThemeChange","offAppThemeChange"]
+              }
               // #endif
             ] as Page[],
           },
@@ -292,14 +292,14 @@
               {
                 name: "打电话",
                 url: "make-phone-call",
-              },
-              {
-                name: "剪贴板",
-                url: "clipboard",
-              },
-              {
-                name: "监听罗盘数据",
-                url: "on-compass-change",
+              },
+              {
+                name: "剪贴板",
+                url: "clipboard",
+              },
+              {
+                name: "监听罗盘数据",
+                url: "on-compass-change",
               },
               // #endif
               /*
@@ -426,11 +426,6 @@
               },
               // #ifdef WEB
               {
-                name: "地图控制",
-                url: "map",
-              },
-              // #endif
-              /* {
                 name: "使用地图查看位置",
                 url: "open-location",
               },
@@ -438,6 +433,8 @@
                 name: "使用地图选择位置",
                 url: "choose-location",
               },
+              // #endif
+              /*
               {
                 name: "地图搜索",
                 url: "map-search",
@@ -503,24 +500,24 @@
                 url: 'facial-recognition-verify',
               }
             ] as Page[],
-          },
-          {
-            id: 'ad',
-            name: '广告',
-            pages: [
-              {
-                name: '激励视频广告',
-                url: 'rewarded-video-ad',
-              }
-              /* {
-                id: "full-screen-video-ad",
-                url: "full-screen-video-ad",
-                name: "全屏视频广告",
-                enable: false,
-                pages: [] as Page[]
-              }, */
-            ] as Page[],
-          },
+          },
+          {
+            id: 'ad',
+            name: '广告',
+            pages: [
+              {
+                name: '激励视频广告',
+                url: 'rewarded-video-ad',
+              }
+              /* {
+                id: "full-screen-video-ad",
+                url: "full-screen-video-ad",
+                name: "全屏视频广告",
+                enable: false,
+                pages: [] as Page[]
+              }, */
+            ] as Page[],
+          },
           // #endif
           {
             id: "payment",
@@ -630,4 +627,4 @@
     display: none;
     background-color: rgba(16, 16, 16, 0.5);
   }
-</style>
+</style>