h5页面里点击按钮打开手机高德地图APP或百度地图APP

 1 HTML

<div class="nav" @click="onNavClick"></div>
<van-popup v-model:show="visible" position="bottom">
    <div class="select_area">
        <div @click="onMapOneClick">百度地图</div>
        <div @click="onMapTwoClick">高德地图</div>
        <div @click="onCancelClick">取消</div>
    </div>
</van-popup>

2 JS

let visible = ref(false)

const onNavClick = () => {
    visible.value = true
}

const getScheme = ()=> {
    let agent = navigator.userAgent.toLowerCase();
    if (agent.indexOf("iphone") != -1 || agent.indexOf("ipad") != -1) {
        return "iosamap://viewMap";
    } else {
        return "androidamap://navi";
    }
}

const onMapOneClick = () => {
    var queryString = `destination=latlng:${detailObj.value.LATITUDE},${detailObj.value.LONGITUDE}|name:${detailObj.value.SHELTER_NAME}&mode=driving&coord_type=bd09ll&src=com.mzwu.www`;
    var app_url = `baidumap://map/direction?${queryString}`;
    window.location.href = app_url
}


const onMapTwoClick = () => {
    let app_url = `${getScheme()}?sourceApplication=高德&poiname=${detailObj.value.SHELTER_NAME}&lat=${detailObj.value.LATITUDE}&lon=${detailObj.value.LONGITUDE}&dev=1&style=2`;
    window.location.href = app_url
}

const onCancelClick = () => {
    visible.value = false
}