h5 唤起高德地图

某公司摸鱼前端

于 2024-03-26 09:01:53 发布

阅读量634

点赞数 1

分类专栏： javascript 文章标签： html5 html

本文链接：https://blog.csdn.net/weixin_59685936/article/details/137032907

版权

javascript 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

高德地图APP唤起链接(ios)：

iosamap://path?sourceApplication=&slat=&slon=&sname=&dlat=&dlon=&dname=&dev=&t=

高德地图APP唤起链接(android)：

amapuri://route/plan/?sourceApplication=&slat=&slon=&sname=&dlat=&dlon=&dname=&dev=&t=

参数：

slat / slng / sname 终点位置信息

dlat / dlng / dname 起点位置信息

拼接完成地址后，将h5的地址重定向到拼接的地址即可

示例代码：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML5唤起高德地图APP示例</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <script src="https://webapi.amap.com/maps？v=2.0&key=你的key&plugin=AMap.Geolocation" type="text/javascript"></script>
</head>
<body>
    <script>
        //根据手机系统获取scheme
        function getScheme(){
           let agent = navigator.userAgent.toLowerCase();
           if(agent.indexOf("iphone") != -1 || agent.indexOf("ipad") != -1){
               return "iosamap://path";
           }else{
               return "amapuri://route/plan";
           }
        }
        let geolocation = new AMap.Geolocation();
        geolocation.getCurrentPosition(function(status,result){
            if(status=="complete"){
                let { lat,lng } = result
                let alat,alng,address;
                let app_url = `${getScheme()}?sourceApplication=com.mzwu.www&slat=${lat}&slon=${lng}&sname=我的位置&dlat=${alat}&dlon=${alng}&dname=${address}&dev=0&t=0`;
                window.location.href = app_url
            }else{
                alert('打开高德地图失败，请检查您的手机设置')
            }
        })
    </script>
</body>
</html>