脚本语言 订阅所有【脚本语言】的日志

HTML5唤起百度地图APP示例

编辑:dnawo 日期:2022-04-01

字体大小: 小 中 大


一、百度地图唤起链接

百度地图APP唤起链接(ios&android)：
引用内容 引用内容
baidumap://map/direction?origin=&destination=&mode=&coord_type=&src=

百度地图web版链接(region必选)：
引用内容 引用内容
http://api.map.baidu.com/direction?origin=&destination=&mode=&coord_type=&src=&region=&output=

二、HTML5唤起百度地图APP示例

实现思路：先用百度地图APP链接尝试唤起APP，如果唤起失败，则打开百度地图WEB版代替，具体代码如下(应用AK需替换成自己的)：

复制内容到剪贴板程序代码 程序代码
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML5唤起百度地图APP示例</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
    <script src="https://api.map.baidu.com/api?v=3.0&ak=KCGfKcGhNO2vPBIRrPxSLxPPvPXmmGSs"></script>
</head>

<body>
    <script type="text/javascript">
        $(document).ready(function(){
            //唤起百度地图
            function openBaiduMap(lng, lat, address) {
                var geolocation = new BMap.Geolocation();
                geolocation.getCurrentPosition(function (result) {
                    if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                        var queryString = `origin=latlng:${result.point.lat},${result.point.lng}|name:我的位置&destination=latlng:${lat},${lng}|name:${address}&mode=driving&coord_type=bd09ll&src=com.mzwu.www`;
                        var app_url = `baidumap://map/direction?${queryString}`;
                        var web_url = `http://api.map.baidu.com/direction?${queryString}&region=中国&output=html`;

                        //尝试唤起百度地图App
                        window.location.href = app_url;

                        //唤起失败打开Web版百度地图
                        var startTime = Date.now();                            
                        var count = 0;

                        var t = setInterval(function () {
                            if (++count < 30) {
                                return;
                            }
                            if (Date.now() - startTime > 800) {
                                clearInterval(t);
                            }
                            if (!(document.hidden || document.webkitHidden)) {
                                window.location.href = web_url;
                            }
                        }, 20);

                        window.onblur = function () {
                            clearInterval(t);
                        };
                    } else {
                            alert("获取不到定位，请检查手机设置！");
                    }
                });
            }

            openBaiduMap(120.157749,30.263856,'西湖断桥');
        });            
    </script>
</body>
</html>

#移动端#web版

相关链接

[1].地图调起API(ios端)：https://lbsyun.baidu.com/index.php?title=uri/api/ios
[2].地图调起API(android端)：https://lbsyun.baidu.com/index.php?title=uri/api/android
[3].地图调起API(web端)：https://lbsyun.baidu.com/index.php?title=uri/api/web
[4].百度获取当前定位：https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/geoloaction

上一篇: HTML5百度地图基本页模板
下一篇: HTML5高德地图基本页模板
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
最新日志:
评论: 0 | 引用: 0 | 查看次数: 2719
发表评论
请登录后再发表评论！