打开本机地图app 并显示路线规划(mui)

最近在整一个酒店导航的功能(用mui实现).因为之前也有些接触第一个想到的就是url跳转打开app并将必要参数通过url传到app 实现导航功能.思路是没错,(其实到最后发现也没啥难的)一步一步开始...先看看app效果:

手机截图啊哈哈有点慢

我的位置

导航菜单

---

• 首先得把样子搭建出来(前提条件啊哈哈不多说了)
• 查看需要跳转的app文档 (我们要求是如上图了 文档主要查看url这一块)
• 检测手机是否有此app 给出提示(这一块做的不够好 mui 没有提供检测手机app的api 这时候就体现出cordova好处了,有兴趣的小伙伴可以自行查询)

第一步搭建页面布局 这个因为关联的东西比较多 我就贴一部分样式代码了 主要还是js这块.

/*样式*/
body{line-height: normal;}
.map-fotter{
    position: fixed;
    bottom: 0;
    left:0;
    width: 100%;
    height: 55px;
    background-color: #fff;
}
.map-fotter img{
    width: 18px;
    height: 18px;
    margin-right:8px;
}
.map-fotter .mineAddress.active{
    color: rgba(243, 174, 5, 1);
}
.map-fotter .mineAddress{
    height: 100%;
    font-size: 16px;
    color: rgba(0, 0, 0, .8);
    -webkit-box-flex: 1;
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;   
}
.map-fotter .line{
    height: 24px;
    border-right: 2px solid rgba(0, 0, 0, .06);
}

#marker-div,#minePos-div{
    font-size: 13px;
    padding:19px;
    box-sizing:border-box;
    color: rgba(0, 0, 0, .5);
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    border-radius:8px; 
    -webkit-box-shadow:0px 4px 20px 0px rgba(0,0,0,0.18);
    -moz-box-shadow:0px 4px 20px 0px rgba(0,0,0,0.18);
    box-shadow:0px 4px 20px 0px rgba(0,0,0,0.18);
}
#minePos-div>span{
    font-size: 16px;
    display: inline-block;
    margin-top: -2px;
    color: rgba(0, 0, 0, 1);
}
h4{
    color: rgba(0, 0, 0,1);
    height:20px;
    line-height: 22px;
    display: -webkit-box ;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all; 
    -webkit-box-orient: vertical;
    -webkit-line-clamp:1;
}
#marker-div::before,#minePos-div::before{
    display:inline-block;
    content: "";width:0;z-index: 9;
    height:0;position: absolute;
    left:calc(50% - .08rem);
    bottom: -.078rem;
    border-left: 0.08rem solid transparent;
    border-top: 0.08rem solid #fff;
    border-right: 0.08rem solid transparent;
    /* border-bottom: 0.1rem solid red; */
}
#marker-div .navigations .navLine{
    width: 76px;
    height: 30px;
    font-size: 14px;
    margin-top:8px;
    background-color: rgba(255, 218, 93, 1);
    color: rgba(0, 0, 0, .8);
    -webkit-border-radius: 36px;
    -moz-border-radius: 36px;
    border-radius: 36px;
    text-align: center;
    line-height: 30px;
    position: relative;
    z-index: 6666;
}
/*  导航 */
.nav-box,.model{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 11;
}
.model{
    background-color: rgba(0, 0, 0, .5);
    z-index: 12;
}
.map-group{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 13;
}
.map-group{
    padding: 10px;
}
.map-group .map-title{
    height: 43px;
    line-height: 43px;
    font-size: 14px;
    color: rgba(102, 102, 102, 1);
    text-align: center;
    background-color: rgba(223, 223, 223, 1);
    border-radius: 12px 12px 0 0;
    border-bottom: 1px solid rgba(0, 0, 0, .0283);
}
.map-group .type-warpe{
    border-radius: 0 0 12px 12px;
    background-color: rgba(223, 223, 223, 1);
    overflow: hidden;
}
.map-group .map-type{
    height: 56px;
    line-height: 56px;
    font-size: 20px;
    color: rgba(64, 137, 239, 1);
    border-bottom: 1px solid rgba(0, 0, 0, .0283);
    text-align: center;
}
.map-group .close{
    height: 56px;
    margin-top: 8px;
    line-height: 56px;
    color: rgba(64, 137, 239, 1);
    font-size: 20px;
    background-color: #fff;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    text-align: center;
}
#shortPrompt{
    bottom: 220px;
}
/* animation */
.animateDown{
    display:flex;
}
/* 布局*/

    
    
酒店位置
    


    
    

        地图加载中...
    
    

        

            
            我的位置
        
        
        

            
            酒店位置
        
    

    

        

        

            请选择导航
            

                高德地图
                百度地图
                腾讯地图
                苹果自带地图
            
            取消
        
    
    

刚开始 想着做这个url跳转的时候 可费劲了 网上一堆堆的 不知道是啥 官方的文档也都是些 链接跳转 存在很多 问题. 经过一次次的筛选 还是给他搞出来了 心累 ...(我用的接口都是路线规划如果有别的需求 请看别的) 这个功能只要找对了文档其实很简单(呸呸呸 说过了)

1. 苹果自带的地图 url 文档说明 点我啊啊啊啊啊啊啊 找这个 废了老大劲.

2. 百度地图uri/api/android 点我查看啊啊啊啊啊啊啊啊啊 (ios 也在一起的)

3. 高德地图url文档 这个也很坑 直接看 URL找不到android ios的 点我啊啊啊啊啊啊啊啊(ios 也在一起 )

4. 腾讯的我就不写了 很好找的, 我下面也提供了跳转方法

路由传值的字段说明我就不一一注明了 文档比我说的清楚.

/*
@method jump app 
@param data-id 给app标注的id
@param {function} checkOutApp 判断是否有此app
*/
$(document).on("tap",".checkMap",function(){ //跳出app 打开某地图
    if(currentPosition){
        if($(this).attr("data-id")==2){
            // plus.runtime.openURL("baidumap://map/navi?location="+param.lat+","+param.lon+"&coord_type=wgs84&src=andr.baidu.openAPIdemo");   // 百度地图 
            // plus.runtime.openURL("baidumap://map/direction?origin=name:天安门|latlng:34.264642646862,108.95108518068&destination=40.007623,116.360582&coord_type=bd09ll&mode=driving&src=ios.baidu.openAPIdemo");   // 百度地图 
            window.location.href="baidumap://map/direction?origin=name:我的位置|latlng:"+currentPosition.lat+","+currentPosition.lng+"&destination=name:"+param.address+"|latlng:"+param.lat+","+param.lon+"&coord_type=bd09ll&mode=driving&src=ios.baidu.openAPIdemo";   // 百度地图 
        }else if($(this).attr("data-id")==3){
            window.location.href="qqmap://map/routeplan?type=drive&from=我的位置&fromcoord="+currentPosition.lat+","+currentPosition.lng+"&to="+param.address+"&tocoord="+param.lat+","+param.lon+"&referer=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77" // 腾讯地图
        }else if($(this).attr("data-id")==1){
            if(plus.os.name == "iOS"){
                var iosurl='iosamap://path?sourceApplication=applicationName&sid=BGVIS1&slat='+currentPosition.lat+'&slon='+currentPosition.lng+'&sname=我的位置&did=BGVIS2&dlat='+param.lat+'&dlon='+param.lon+'&dname='+param.address+'&dev=0&t=0';
                plus.runtime.openURL(encodeURI(iosurl));  // 高德地图 
            }else{
                plus.runtime.openURL("androidamap://route/plan/?sid=BGVIS1&slat="+currentPosition.lat+"&slon="+currentPosition.lng+"&sname=我的位置&did=BGVIS2&dlat="+param.lat+"&dlon="+param.lon+"&dname="+param.address+"&dev=0&t=0");  // 高德地图
            }
        }else{
            alert('2')
            window.location.href="maps://http://maps.apple.com/?daddr="+param.address+"&dirflg=d&t=h"; // 苹果地图
        }

        // setTimeout(function(){
            
        checkOutApp();
            
            // testApp();// 
        // },500) 
    }else{
        $('#shortPrompt').remove();
        setTimeout(function(){
            shortPrompt('正在获取定位信息或暂无定位权限，请稍后再试') 
            getCurrentPosition() //重新获取授权定位
        },4000)  
    }
    
})

function checkOutApp() {
 
                var isBlur = false;

                // 通过URL scheme来调起APP
                // location.href = 'baidumap://';

                setTimeout(function() { 

                    if (!isBlur) {
                        // location.href = 'APP的下载链接';
                        $('#shortPrompt').remove();// 防止多次点击 重叠
                        shortPrompt('如手机没有地图app，请先前往安装');
                    }else{
                        $('#shortPrompt').remove();
                    }

                },500);
                
                // if(!document.hidden){
                //  shortPrompt('您可能没有安装该地图导航应用')
                // }else{
                //  alert("切到前台")
                //  $('#shortPrompt').remove()
                // }

                // window 每次失去焦點

                window.onblur = function() {

                    isBlur = true;

                }; 

                var hiddenProperty = 'hidden' in document ? 'hidden' :

                    'webkitHidden' in document ? 'webkitHidden' :

                    'mozHidden' in document ? 'mozHidden' :

                    null;

                var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');

                var onVisibilityChange = function() {

                    if (document[hiddenProperty]) {

                        isBlur = true;

                    }

                }

                document.addEventListener(visibilityChangeEvent, onVisibilityChange);

            }

---

全部的js记得引用 地图的包 我用的是百度地图