refactor: 架构升级

2026-09-12 16:40:40 +08:00 · 2026-08-31 07:58:23 +08:00
commit ba5b77568b
693 changed files with 118430 additions and 0 deletions
@@ -0,0 +1,188 @@
+# uni.openLocation - 打开地图查看位置示例
+
+## 官方文档
+
+参考官方文档：https://uniapp.dcloud.net.cn/api/location/open-location.html#openlocation
+
+## 概述
+
+`uni.openLocation` 用于使用地图查看位置，可以打开系统地图应用显示指定位置。
+
+## 基础用法
+
+```javascript
+uni.openLocation({
+  latitude: 39.908823,
+  longitude: 116.397470,
+  name: '天安门',
+  address: '北京市东城区'
+})
+```
+
+## 完整示例
+
+### 示例 1: 打开地图查看位置
+
+```javascript
+uni.openLocation({
+  latitude: 39.908823,
+  longitude: 116.397470,
+  name: '天安门',
+  address: '北京市东城区天安门广场',
+  scale: 18,
+  success: () => {
+    console.log('打开地图成功')
+  },
+  fail: (err) => {
+    console.error('打开地图失败', err)
+  }
+})
+```
+
+### 示例 2: 先获取位置再打开地图
+
+```javascript
+// 先获取当前位置
+uni.getLocation({
+  type: 'gcj02',
+  success: (locationRes) => {
+    // 打开地图显示当前位置
+    uni.openLocation({
+      latitude: locationRes.latitude,
+      longitude: locationRes.longitude,
+      name: '我的位置',
+      address: locationRes.address || '当前位置'
+    })
+  }
+})
+```
+
+### 示例 3: 在页面中使用
+
+```vue
+<template>
+  <view class="container">
+    <button @click="openCurrentLocation">查看当前位置</button>
+    <button @click="openTargetLocation">查看目标位置</button>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      targetLocation: {
+        latitude: 39.908823,
+        longitude: 116.397470,
+        name: '天安门',
+        address: '北京市东城区天安门广场'
+      }
+    }
+  },
+  methods: {
+    openCurrentLocation() {
+      uni.getLocation({
+        type: 'gcj02',
+        success: (res) => {
+          uni.openLocation({
+            latitude: res.latitude,
+            longitude: res.longitude,
+            name: '我的位置',
+            address: res.address || '当前位置'
+          })
+        },
+        fail: () => {
+          uni.showToast({
+            title: '获取位置失败',
+            icon: 'none'
+          })
+        }
+      })
+    },
+    openTargetLocation() {
+      uni.openLocation({
+        latitude: this.targetLocation.latitude,
+        longitude: this.targetLocation.longitude,
+        name: this.targetLocation.name,
+        address: this.targetLocation.address
+      })
+    }
+  }
+}
+</script>
+```
+
+### 示例 4: 查看商家位置
+
+```javascript
+function openStoreLocation(store) {
+  uni.openLocation({
+    latitude: store.latitude,
+    longitude: store.longitude,
+    name: store.name,
+    address: store.address,
+    scale: 18,
+    success: () => {
+      console.log('打开商家位置成功')
+    }
+  })
+}
+
+// 使用
+const store = {
+  name: '星巴克咖啡',
+  address: '北京市朝阳区xxx路xxx号',
+  latitude: 39.908823,
+  longitude: 116.397470
+}
+openStoreLocation(store)
+```
+
+### 示例 5: 导航到位置
+
+```javascript
+// 在某些平台上，openLocation 可以用于导航
+uni.openLocation({
+  latitude: 39.908823,
+  longitude: 116.397470,
+  name: '目的地',
+  address: '北京市东城区',
+  scale: 18
+})
+```
+
+## 参数说明
+
+| 参数名 | 类型 | 必填 | 说明 |
+|--------|------|------|------|
+| latitude | Number | 是 | 纬度，范围为 -90~90，负数表示南纬 |
+| longitude | Number | 是 | 经度，范围为 -180~180，负数表示西经 |
+| scale | Number | 否 | 缩放比例，范围 5~18，默认为 18 |
+| name | String | 否 | 位置名称 |
+| address | String | 否 | 地址的详细说明 |
+
+## 平台兼容性
+
+| 平台 | 支持情况 |
+|------|---------|
+| H5 | ✅ |
+| 微信小程序 | ✅ |
+| 支付宝小程序 | ✅ |
+| 百度小程序 | ✅ |
+| 字节跳动小程序 | ✅ |
+| QQ 小程序 | ✅ |
+| 快手小程序 | ✅ |
+| App | ✅ |
+| 快应用 | ✅ |
+
+## 注意事项
+
+1. 需要使用 `gcj02` 类型的坐标（通过 `uni.getLocation` 获取）
+2. `scale` 值越大，地图显示越详细
+3. `name` 和 `address` 用于在地图上显示位置信息
+4. 不同平台打开的地图应用可能不同
+
+## 参考资源
+
+- **官方文档**: https://uniapp.dcloud.net.cn/api/location/open-location.html#openlocation
+- **获取位置**: https://uniapp.dcloud.net.cn/api/location/location.html#getlocation