手把手教你用 UniApp 获取用户位置并展示在地图上（含代码详解）本文基于 UniApp ，详细讲解如何通过 uni.

🚀 UniApp 实战 | 获取用户定位地址名称与经纬度 + 嵌入地图展示

在移动端开发中，获取用户当前位置是许多场景的核心需求，例如地图展示、附近服务、订单地址等。在 UniApp 中，我们可以使用 uni.chooseLocation 快速调起系统地图选择位置，并获取详细地址、经度和纬度。

本文将通过 Vue3 的形式，分享如何封装一个定位地址的功能模块，并在页面中嵌入地图实时展示选中地址。

✨ 效果演示图

📷 *

📌 实现目标

✅ 使用系统地图选点，获取地址名称、经纬度
✅ 页面展示已选地址信息
✅ 页面嵌入地图组件打点展示
✅ 选择成功/失败时给予用户反馈
✅ 防止重复点击，增强用户体验

🧠 实现思路

我们主要调用 uni.chooseLocation()，其成功回调中会返回如下字段：

res.address: 详细地址字符串
res.name: 地址名称（可能是 POI 名）
res.latitude: 纬度
res.longitude: 经度

然后我们用 <map> 组件将地址在页面中可视化呈现，并打上 Marker。

🧩 Vue3 + `<script setup>` 风格完整代码

<script setup lang="ts">
import { ref, computed } from 'vue'

// 地址信息
const locationName = ref('')
const latitude = ref(0)
const longitude = ref(0)
const isLocating = ref(false)

// 示例地址ID（可用于后续接口）
const addressId = 1

// 业务函数
const getConfirm = (id: number | string) => {
  console.log('确认地址ID：', id)
}

// 地图打点
const mapMarkers = computed(() => {
  if (!latitude.value || !longitude.value) return []
  return [
    {
      id: 1,
      latitude: latitude.value,
      longitude: longitude.value,
      title: locationName.value,
      iconPath: '/static/marker.png', // static 文件夹下的图标
      width: 30,
      height: 30
    }
  ]
})

// 调用地图选点
const editLocation = () => {
  if (isLocating.value) return
  isLocating.value = true

  uni.chooseLocation({
    success: (res) => {
      if (!res || !res.address) {
        uni.showToast({ title: '地址无效，请重试', icon: 'none' })
        return
      }

      locationName.value = res.name || res.address
      latitude.value = res.latitude
      longitude.value = res.longitude

      getConfirm(addressId)

      uni.showToast({ title: '定位成功', icon: 'success' })
    },
    fail: (err) => {
      console.warn('选择失败：', err)
      uni.showToast({ title: '无法获取位置', icon: 'none' })
    },
    complete: () => {
      isLocating.value = false
    }
  })
}
</script>

<template>
  <view class="container">
    <!-- 地址展示 -->
    <view class="location-box">
      <text>📍 当前地址：</text>
      <text class="location-text">{{ locationName || '未选择地址' }}</text>
    </view>
       <!-- 经纬度展示 -->
     <view class="location-box">
      <text>🌐 经纬度：：</text>
      <text class="location-text">{{ latitude}} -- {{longitude}}</text>
    </view>

    <!-- 按钮选择地址 -->
    <button @click="editLocation" :disabled="isLocating">点击选择位置</button>

    <!-- 地图打点展示 -->
    <map
      v-if="latitude && longitude"
      class="map-view"
      :latitude="latitude"
      :longitude="longitude"
      :scale="16"
      :markers="mapMarkers"
      show-location
    />
  </view>
</template>

<style scoped>
.location-box {
  margin: 12px 0;
}
.location-text {
  color: #4caf50;
  font-weight: bold;
  margin-left: 6px;
}
.map-view {
  width: 100%;
  height: 300px;
  margin-top: 20px;
  border-radius: 12px;
  overflow: hidden;
}
</style>

🔐 权限提醒（App 平台）

如你打包 App 使用地图组件，需在 manifest.json 中配置地图 SDK 的 Key。例如使用高德地图：

"app-plus": {
  "modules": {
    "AMap": {
      "appkey": {
        "ios": "你的iOS key",
        "android": "你的Android key"
      }
    }
  }
}

📦 微信小程序地图注意

微信小程序默认使用腾讯地图，需要在腾讯位置服务申请小程序专用 key；
确保小程序后台已添加 key；
可选：在真机调试时更可靠，模拟器有时地图无法正常显示。

✅ 小结

本文完整讲解了如何使用 UniApp 实现：

🌍 地址名称、经纬度获取；
🧭 系统地图选点；
🗺 地图组件打点展示；
⛑ 用户体验优化：防抖、toast 提示；
📦 权限配置与平台适配。

你可以在项目中直接使用这套组合，构建出稳定好用的地址定位模块。

🔄 后续推荐阅读

使用高德 SDK 进行自动定位与逆地址解析
把地址信息同步保存到云数据库
封装成 composable：useLocationPicker()

📚 参考文档

以下是本文涉及的官方文档或开发平台链接，建议收藏以便随时查阅：

❓ 常见问题解答（FAQ）

Q1: `Map key not configured` 是什么原因？

A: 这是地图 SDK 提示未配置 Key。请根据使用平台（App/小程序）：

App 端需在 manifest.json 中配置高德或腾讯地图的 appkey；
微信小程序需在腾讯位置服务申请 Key，并在后台绑定小程序 AppID；
若使用 uni.chooseLocation，也可能是调用的是地图服务未授权。

Q2: 地图组件中不显示标记点怎么办？

确保 latitude、longitude 都已经赋值；
markers 数组格式正确，并包含有效坐标；
iconPath 图标路径必须为 static 文件夹下资源；
微信小程序需要真机调试才能显示地图标记。

Q3: 是否可以自定义地图图标？

A: 可以，在 markers 中的 iconPath 指向你自定义的图标路径（建议 30x30 px）。例如：

iconPath: '/static/marker.png'

Q4: 如何默认打开地图时就展示当前位置？

A: 可以使用 uni.getLocation() 在页面 onLoad 时获取当前 GPS 坐标，然后传入给 map 组件作为默认坐标。

Q5: `chooseLocation` 失败怎么处理？

用户取消了选择；
地图权限未授权（需引导用户授权）；
小程序未绑定腾讯地图 key 或未开通服务；
使用了 H5 端测试，不支持该 API（需使用 App 或小程序真机）。

Q6: 如何支持多个标记点展示？

A: 在 markers 中添加多个对象即可，例如：

markers: [
  { id: 1, latitude: ..., longitude: ..., title: 'A' },
  { id: 2, latitude: ..., longitude: ..., title: 'B' }
]

个人博客已同步文章 UniApp 实战 | 获取用户定位地址名称与经纬度 + 嵌入地图展示 -- 一清三白

手把手教你用 UniApp 获取用户位置并展示在地图上（含代码详解）