通过URL传值在手机端打开一键导航

最新推荐文章于 2023-11-24 09:32:54 发布

Jason-张百万 fastnas作者

最新推荐文章于 2023-11-24 09:32:54 发布

阅读量1.4k

点赞数

分类专栏：开发笔记文章标签： Jquery 百度一键导航

本文链接：https://blog.csdn.net/xiaolinenet/article/details/91210812

版权

开发笔记专栏收录该内容

27 篇文章 1 订阅

订阅专栏

通过URL传值在手机端打开一键导航

百度一键导航接收url 然后在手机端调用百度地图导航，如果手机按装了百度地图就会自动调起百度地图这个功能我研究了好久现在这个效果比较满意借鉴了好多大佬的东西，

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>HTML5页面调用百度地图API,获取当前位置并导航到目的地</title>
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=oV3nwFU8cORhbhsenBvYuWDpG8NsyFjO"></script>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!--调用jQuery-->

<style type="text/css">
    body,
    html,
    #allmap {
        width: 100%;
        height: 100%;
        overflow: hidden;
        margin: 0;
        font-family: "微软雅黑";
    }
</style>

</head>

<body>
    <div id="allmap"></div>
</body>

</html>
<script type="text/javascript">
        // 读取url 传值 fid=XXX
        //通过url传值来进行一KEY导航
    // mapapibaiduv7.html?company=小明同学&a=1&b=2&c=3
    // mapapibaiduv7.html?title=caimaibao_lbs...&jingdu=45.768246&weidu=126.766338 
    // mapapibaiduv7.html?title=caimaibao_lbs...jingdu=45.768246weidu=126.766338
    function GetQueryString(title) {
        var reg = new RegExp("(^|&)" + title + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]); return null;
    }

    // 调用方法
    alert(GetQueryString("title"));
    alert(GetQueryString("jingdu"));
    alert(GetQueryString("weidu"));
  
    

    var jingweidu= GetQueryString("jingdu") + ',' + GetQueryString("weidu");

    var map = new BMap.Map("allmap");
    var point = new BMap.Point(jingweidu);
    map.centerAndZoom(point, 20);
    map.enableScrollWheelZoom();

    var myIcon = new BMap.Icon("/assets/img/center.gif", new BMap.Size(30, 30), {
        anchor: new BMap.Size(10, 10)
    });

    var marker = new BMap.Marker(point, { icon: myIcon });
    map.addOverlay(marker);

    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function (r) {
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
            var mk = new BMap.Marker(r.point);
            map.addOverlay(mk);
            //map.panTo(r.point);//地图中心点移到当前位置
            var latCurrent = r.point.lat;
            var lngCurrent = r.point.lng;
            //alert('我的位置：'+ latCurrent + ',' + lngCurrent);

            location.href = "http://api.map.baidu.com/direction?origin=" + latCurrent + "," + lngCurrent + "&destination="+jingweidu+"&mode=driving&region=哈尔滨市&output=html";

        }
        else {
            alert('failed' + this.getStatus());
        }
    }, { enableHighAccuracy: true })


    map.addOverlay(marker);
    var licontent = "<b>采买宝:正在根据您的GPS位置正载载入一健导航</b>";
    // licontent += "<span><strong>地址：</strong>哈尔滨市禧龙五金市场东区2街区A栋3号</span><br>";
    // licontent += "<span><strong>电话：</strong>15945666763</span><br>";
    var opts = {
        width: 200,
        height: 80,
    };
    var infoWindow = new BMap.InfoWindow(licontent, opts);
    marker.openInfoWindow(infoWindow);
    marker.addEventListener('click', function () {
        marker.openInfoWindow(infoWindow);
    });

</script>

承接APP开发，公众号小程序，最近一起在学习Fastadmin QQ 350400138 接各种大小活

借鉴了 https://www.cnblogs.com/jinshuo/p/8074052.html 这位大佬的文章