uniapp打开导航软件并定位到目标位置的实现

javascript 复制代码
/**
 * 打开导航
 * @param location 经纬度(例如:"117.214713,39.116884")
 * @param address 地址
 */
export function mapNavigation(location, address) {
  const locationArr = location.split(',')
  const longitude = locationArr[0]
  const latitude = locationArr[1]
  let url = '' // app url
  let webUrl = '' // web url 用来为用户未安装导航软件时打开浏览器所使用url
  plus.nativeUI.actionSheet({ // 选择菜单
    title: '选择地图应用',
    cancel: '取消',
    buttons: [{
      title: '高德地图'
    }, {
      title: '百度地图'
    }] // 可选的地图类型
  }, (e) => {
    // 判断用户选择的地图
    switch (e.index) {
      // 下面是拼接url,不同系统以及不同地图都有不同的拼接字段
      case 1: // 打开高德地图
        if (plus.os.name == 'Android') { // 安卓
          url =
              `androidamap://viewMap?sourceApplication=appname&poiname=${address}&lat=${latitude}&lon=${longitude}&dev=0`
        } else { // 苹果
          url =
              `iosamap://viewMap?sourceApplication=applicationName&poiname=${address}&lat=${latitude}&lon=${longitude}&dev=0`
        }
        webUrl =
            `https://uri.amap.com/marker?position=${longitude},${latitude}&name=${address}&src=mypage&coordinate=gaode`
        break
      case 2: // 打开百度地图
        if (plus.os.name == 'Android') { // 安卓
          url =
              `baidumap://map/marker?location=${latitude},${longitude}&title=${address}&content=${address}&src=andr.baidu.openAPIdemo&coord_type=gcj02`
        } else { // 苹果
          url =
              `iosamap://map/marker?location=${latitude},${longitude}&title=${address}&content=${address}&src=ios.baidu.openAPIdemo&coord_type=gcj02`
        }
        webUrl =
            `http://api.map.baidu.com/marker?location=${latitude},${longitude}&title=${address}&content=${address}&output=html&src=webapp.baidu.openAPIdemo`
        break
    }
    // 如果选中
    if (url != '') {
      url = encodeURI(url)
      // 打开 app 导航
      plus.runtime.openURL(url, () => {
        // 毕竟用户可能没有安装app但一定安装的有浏览器
        // 如果失败则说明未安装 直接 打开网页版进行导航
        let chooseMap = ''
        if (e.index == 1) {
          chooseMap = '高德地图'
        } else if (e.index == 2) {
          chooseMap = '百度地图'
        } else {
          chooseMap = '腾讯地图'
        }
        uni.showModal({
          title: '提示',
          content: '检测到您本机暂未安装' + chooseMap + '应用,是否要选择使用浏览器打开?',
          confirmText: '确定',
          cancelText: '取消',
          showCancel: true,
          success: function(res) {
            if (res.confirm) {
              plus.runtime.openURL(webUrl)
            }
          }
        })
      })
    }
  })
}
相关推荐
码兄科技几秒前
实战:基于Spring Boot + UniApp的地理信息小程序开发
spring boot·后端·uni-app
独泪了无痕3 分钟前
Vue3 Hooks使用实战解析
前端·vue.js
shawxlee1 小时前
vue3在public下封装config.js自定义配置动态数据,可在打包后直接修改,方便后端部署及后续维护
前端·javascript·经验分享·vue·团队开发·js·项目优化
用户059540174462 小时前
把记忆存储的回归测试从手工换成 Playwright + GitHub Actions,线上缺陷降低 80%
前端·css
触底反弹2 小时前
🚀 从 DOM0 级到 React 合成事件:前端事件监听的 20 年演进史
前端·react.js·面试
kyriewen2 小时前
我给前端项目的接口请求套了6层保护——才发现以前一直在裸奔
前端·javascript·面试
颜酱2 小时前
04 | 召回前置准备:搭好召回所需的四个数据库
前端·人工智能·后端
jieyucx3 小时前
Nuxt4阶段六:工程化与进阶 —— 模块、中间件、插件、TS 与测试
中间件·vue·web·nuxt·全栈·ssr
郝亚军4 小时前
如何安装webstorm、Node.js和vue CLI
前端·javascript·vue.js
IT_陈寒4 小时前
React的useEffect依赖项把我坑惨了
前端·人工智能·后端