H5页面唤醒导航应用简单实现

小王开心开心开开心心

已于 2024-12-31 17:27:43 修改

阅读量750

点赞数 5

文章标签：前端

于 2024-12-31 17:25:40 首次发布

本文链接：https://blog.csdn.net/Chinese_wawa_summer/article/details/144850173

版权

最近在写H5页面，除了一般的画页面，有个唤醒导航应用，功能接力的需求，简要记录。

实现的思路也很简单。采用的是构造URl，直接打开链接，并且定时判断是否打开成功，如果没有成功，默认打开高德网页导航，实现功能接力，后序的操作丢给了导航软件。

实现代码大致如下，不过我这里是点击地图点位带入点位信息实现导航，所以还有拿到点位信息的功能没有实现。

function showMap(type) {
    // todo:拿到点位信息传入url
    let url = '',
        longitude = '104.258354',
        latitude = '36.547901',
        name = ''
    if (type == 'gaode') {
        // 高德
        // url = `androidamap://navi?sourceApplication=yourAppName&poiname=${name}&latitude=${latitude}&longitude=${longitude}&dev=1`
        url =
            'androidamap://navi?sourceApplication=appname&poiname=fangheng&lat=36.547901&lon=104.258354&dev=1&style=2'
    } else if (type == 'baidu') {
        // 百度
        url = `baidumap://map/navi?destination=${latitude},${longitude}&title=${name}&output=html&coord_type=gcj02&src=test`
    }
    // window.location.href = url
    const iframe = document.createElement('iframe')
    iframe.style.display = 'none'
    iframe.src = url
    document.body.appendChild(iframe)
    setTimeout(() => {
        document.body.removeChild(iframe)
    }, 1000)

    // 定时器检测是否唤起成功，如果失败则跳转到网页版地图
    let timer = setTimeout(() => {
        showToast({
            message: '导航软件暂时无法开启，进入网页导航',
            position: 'top'
        })
        window.location.href = `https://uri.amap.com/marker?position=${longitude},${latitude}&name=${encodeURIComponent(
            name
        )}&src=mypage&coordinate=gaode&callnative=0`
    }, 2000)

    window.addEventListener('blur', () => {
        clearTimeout(timer)
    })
}

以上代码自测在安卓手机上是可以唤醒高德APP或者进入到高德网页导航的，但是IOS还有点问题，这里应该是要判断当前系统，然后构造的URL有所不同具体如何配置URL可以看各个地图的官方配置：步行导航-iOS-开发指南-高德地图手机版 | 高德地图API

web服务API | 百度地图API SDK

这儿有一个判断当前系统的函数

function detectOS() {
    var userAgent = navigator.userAgent || navigator.vendor || window.opera
    // 判断是否Android
    if (/Android/.test(userAgent)) {
        return 'Android'
    }
    // 判断是否iOS
    if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
        return 'iOS'
    }
    // 如果都不是，则返回未知
    return 'Unknown'
}

看了不少网上大家的实现方式，我这个就是很粗略的实现了需求，暂时没有余力做的更多，当然如果功能要实现的更完整，还有很多需要改进的地方，部分看过的链接：

百度安全验证（这个链接里面介绍了几种实现唤醒APP的方式）

Android 集成高德地图 android高德地图导航_mob64ca140530fb的技术博客_51CTO博客

H5唤起高德、百度、腾讯地图导航_h5地图导航-CSDN博客

这是2024年最后一天了啊~~度过了迷幻的一年。虽然要一个人跨年，但是不要觉得这一天有多特殊，这只是人生中平常的一天而已，不用有太多额外的情绪。