APP-6-百度地图导航

Posted 2021-02-09 ricoo

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了APP-6-百度地图导航相关的知识，希望对你有一定的参考价值。

1.代码部分

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.js"></script>
        <script src="http://api.map.baidu.com/api?v=2.0&ak=PG4DBjFTHfawSwT10GLLn4YZhQCmGYGA"></script>
        <script src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
        <script src="../../js/mui.min.js"></script>
        <script src="../../js/common.js"></script>
        <!--<script src="../../js/immersed.js"></script>-->
        <link href="../../css/common.css" rel="stylesheet" />
        <link href="../../css/mui.min.css" rel="stylesheet" />
        <link href="../../css/iconfont.css" rel="stylesheet" />

        <title>地图应用-地图导航</title>
        <style type="text/css">
            body,
            html,
            {
                font-family: "微软雅黑";
            }
        </style>
    </head>

    <body>
        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title mui-body-font">地图导航</h1>
        </header>

        <div class="mui-content mui-content-padded">
            <button type="button" class="mui-btn mui-btn-block mui-btn-primary" onclick="navigateWithMap()">
                第三方导航系统
            </button>    
        </div>
    </body>
    <script type="text/javascript">
        function navigateWithMap(){
            if(‘android‘===plus.os.name&&navigator.userAgent.indexOf(‘StreamApp‘)>0){
                plus.nativeUI.toast(‘当前环境暂不支持地图插件‘);
                return;
            }
            // 设置目标位置坐标点和其实位置坐标点
            var dst = new plus.maps.Point(120.214666,30.211029); //吉利集团
            var src = new plus.maps.Point(116.335,39.966); // 大钟寺
            // 调用系统地图显示 
            plus.maps.openSysMap( dst, "天安门", src );
        }
    </script>

</html>

View Code

2.测试

　调用第三方导航

　技术图片

以上是关于APP-6-百度地图导航的主要内容，如果未能解决你的问题，请参考以下文章

基于百度地图sdk的地图app开发——导航和模拟导航

easyui左侧导航菜单右侧载入百度地图项目框架

导航抽屉中的谷歌地图 - 空指针异常，哪个是正确的片段？

自定义百度地图导航控件

百度地图API之如何制作驾车导航