uni-halo/.agents/bak-skills/uniappx-project/examples/api/location/open-location.md

uni.openLocation - 打开地图查看位置示例

官方文档

参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/location/open-location.html#openlocation

概述

uni.openLocation 用于使用地图查看位置，可以打开系统地图应用显示指定位置。

基础用法

uni.openLocation({
  latitude: 39.908823,
  longitude: 116.397470,
  name: '天安门',
  address: '北京市东城区'
})

完整示例

示例 1: 打开地图查看位置

uni.openLocation({
  latitude: 39.908823,
  longitude: 116.397470,
  name: '天安门',
  address: '北京市东城区天安门广场',
  scale: 18,
  success: () => {
    console.log('打开地图成功')
  },
  fail: (err) => {
    console.error('打开地图失败', err)
  }
})

示例 2: 先获取位置再打开地图

// 先获取当前位置
uni.getLocation({
  type: 'gcj02',
  success: (locationRes) => {
    // 打开地图显示当前位置
    uni.openLocation({
      latitude: locationRes.latitude,
      longitude: locationRes.longitude,
      name: '我的位置',
      address: locationRes.address || '当前位置'
    })
  }
})

示例 3: 在页面中使用

<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: 查看商家位置

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: 导航到位置

// 在某些平台上，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://doc.dcloud.net.cn/uni-app-x/api/location/open-location.html#openlocation
• 获取位置: https://doc.dcloud.net.cn/uni-app-x/api/location/location.html#getlocation