文章浏览阅读 1.1k 次，点赞 4 次，收藏 11 次。本文将手把手拆解在微信小程序里使用 uni‑app 完成定位、选点以及唤起原生地图进行导航的全过程。

uni‑app 是一套跨平台的前端框架，使用 Vue 的语法Ke以一次编写代码，同时产出微信/支付宝/字节跳动等多个小程序以及 App 包体。对于想要兼顾 Web、App 与各类小程序的团队而言，它像一把多功Neng瑞士军刀：

统一的 API屏蔽了底层差异。

配合插件市场的「高德地图」或「腾讯位置服务」插件，可直接调用官方 SDK。

支持 TypeScript、Composition API，让代码geng易维护。

在正式写代码前，你需要完成以下两件事：

在高德或腾讯开放平台申请 Web/小程序对应的 Key。记得把回调域名设置为你的项目域名，否则定位会被拦截。

在项目根目录的manifest.json里添加定位权限声明。

举个例子，Ru果你走的是高德路线，那么在manifest.json → App → Permissions → location = true即可。

A. 使用原生的uni.getLocation

function getCurrentPos {
  return new Promise => {
    uni.getLocation({
      type: 'gcj02',          // 返回高德坐标系
      success: res => resolve,
      fail: err => reject
    })
  })
}

B. 通过插件封装的@dcloudio/uni-helper/location.js

import { useLocation } from '@dcloudio/uni-helper'
const { getLocation } = useLocation
async function fetchPos {
  try {
    const { latitude, longitude } = await getLocation
    return { latitude, longitude }
  } catch  {
    console.error
  }
}

Ru果用户第一次访问时没有打开定位开关，系统会弹窗提示；若用户直接点了拒绝，我们Ke以主动跳转到设置页提醒他。

这一步是把「我想去哪里」这个需求变成经纬度坐标。它会弹出一个内置的小地图界面让用户点选或搜索地址：

async function pickTarget {
  try {
    const res = await new Promise => {
      uni.chooseLocation({
        success: resolve,
        fail: reject
      })
    })
    // res 包含 latitude、longitude、name、address 等字段
    return res
  } catch  {
    console.warn
  }
}

温馨提示：在真机上才Nengkan到完整 UI，开发者工具里只Neng模拟返回固定数据。

当我们拿到起点和终点后只需一行代码即可把系统默认地图拉出来并自动进入导航模式：

function startNavigation {
  // dest 必须包含 latitude、longitude、name等字段
  uni.openLocation({
    latitude: dest.latitude,
    longitude: dest.longitude,
    name: dest.name || '',
    address: dest.address || '',
    scale: 16,
    // 以下参数只对部分平台有效，可自行查阅文档
    // provider: 'gaode'   // 高德 / 腾讯 / 百度 可自行切换
  })
}

Ru果你想强制使用高德而不是系统默认，Ke以先引入, 然后调用它提供的.

Key 丢失导致定位返回空值。 检查控制台是否报错「key 未注册」或「域名未备案」。重新登录开放平台，把对应的小程序 AppID 填进去再编译一次。

SNS 权限被拦截。 微信后台> 开发设置> 功Neng设置，需要勾选「获取位置信息」才Neng正常弹窗授权。

IPhone 上出现经纬度漂移。 iOS 默认返回 WGS84，需要手动转换为 GCJ02 再交给 map API，否则出现偏差约200米左右。可使用.

"点击按钮无响应" hen多同学忘记给按钮加上@click.stop.prevent='handler'; 导致事件被父容器捕获而失效。

"真机调试卡死" 开启「调试模式」后会多一次网络请求去验证 Key，有时网络慢会导致 UI 卡顿。建议发布版先关闭调试再测试性Neng。

偶尔kan到奇怪的日志：「 openlocation 参数缺失」，这通常是因为你在某个分支忘记传递 address 字段，引起 API 报错，别慌，加上空字符串就好啦~

💡 小技巧：把「获取定位 → 打开选择 → 启动导航」三步封装成一个组合式函数，这样页面只需要一行@click='goNav'.

复制上面的代码粘贴进你的 uni‑app 项目，然后执行`npm run dev:%PLATFORM%`即可在真机中体验完整流程。别忘了把 manifest 中的"AppID"/"Key"/权限dou填齐，否则会被微信审核打回哦~ 😅

kan完这篇文章，你应该Yi经掌握了从授权到跳转外部地图的一条龙服务。Ru果你还有其他需求，比如实时路况展示、轨迹回放或者离线缓存，douKe以继续深挖对应 SDK 的高级接口。技术本身是冷冰冰的，但每一次成功唤起导航，让用户顺利抵达目的地，那份成就感可是热血沸腾！祝大家编码愉快，项目早日上线 🚀