H5 调起第三方地图软件（百度、腾讯、高德）

新的需求，项目为 H5 嵌入 App，需要让 H5 能直接调起第三方地图软件实现目标地点的导航。

食用方法很简单，直接跳转相应的 URL 即可，不过 H5 无法判断用户是否安装了相应的地图 App。

区分用户端环境

let ua = navigator.userAgent.toLowerCase()
if (ua.indexOf('like mac os x') > -1) {
    this.OS = 'IOS'
}
if (ua.indexOf('android') > -1) {
    this.OS = 'Android'
}

高德地图

官方文档

toGaoDe() {
    if (this.OS === 'IOS') {
        location.href =
            `iosamap://poi?sourceApplication=applicationName&name=关键词&dev=0`
    }
    if (this.OS === 'Android') {
        location.href =
            `androidamap://poi?sourceApplication=softname&keywords=关键词&dev=0pkg=com.autonavi.minimap`
    }
}

百度地图

官方文档

toBaidu() {
    if (this.OS === 'IOS') {
        location.href = `baidumap://map/place/search?query=关键词&region=深圳&src=ios.baidu.openAPIdemo`
    }
    if (this.OS === 'Android') {
        location.href =
            `bdapp://map/place/search?query=关键词&region=深圳&src=andr.baidu.openAPIdemo`
    }
}

腾讯地图

官方文档

toTencent() {
    if (this.OS === 'IOS') {
        location.href =
            `qqmap://map/search?keyword=关键词&region=深圳&HPFBZ-4AJKK-4YLJA-AUD4A-UMQD7-2FBA7`
    }
    if (this.OS === 'Android') {
        location.href =
            `qqmap://map/search?keyword=关键词&region=深圳&referer=HPFBZ-4AJKK-4YLJA-AUD4A-UMQD7-2FBA7`
    }
}

本文作者：Kiro

本文链接： https://www.kiro.cc/2022/06/h5-open-map/

更新于 2023-04-10

# uni-app