【百度地图API】如何制作多途经点的线路导航——驾车篇

绝地灬酷狼 2022-03-31 12:19 346阅读 0赞

原文: [【百度地图API】如何制作多途经点的线路导航——驾车篇][API]

摘要：

休假结束，酸奶小妹要**从重庆驾车去北京**。可是**途中要去西安**奶奶家拿牛奶饼干呢！用百度地图API，能不能帮我实现这个愿望呢？

\------------------------------------------------------------------------------------------------------------------------

一、创建地图

首先要告诉大家的是，API1.2版本取消密钥，取消服务设置，大家可以采用更加简短的方式引用API的JS啦~

大家跟我一起来创建一张简单的地图：

var map = new BMap.Map("container");
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 13);

然后为地图加上一些合适的控件：

map.addControl(new BMap.NavigationControl());               // 添加平移缩放控件
    map.addControl(new BMap.ScaleControl());                    // 添加比例尺控件
    map.addControl(new BMap.OverviewMapControl());              //添加缩略地图控件

我手工找到的重庆、西安、北京三个城市的坐标点，使用[坐标拾取工具（请点击）][Link 1]可以轻松找到这三个经纬度。

当然，你也可以使用localsearch类的search方法。这个可以随意。

![2011082614495353.jpg][]

找到坐标点之后，创建三个点对象。

var myP1 = new BMap.Point(106.521436,29.532288);    //起点-重庆
    var myP2 = new BMap.Point(108.983569,34.285675);    //终点-西安
    var myP3 = new BMap.Point(116.404449,39.920423);    //终点-北京

二、创建一个驾车导航和两个驾车搜索

好啦，现在来创建一个驾车导航吧~

这句话是不是很简单？用这句话就可以创建驾车导航啦。

var driving = new BMap.DrivingRoute(map);    //创建驾车实例

然后写两个搜索方法：

第一个是搜索从重庆到西安的，第二个是从西安到北京的。

driving.search(myP1, myP2);                 //第一个驾车搜索
    driving.search(myP2, myP3);                 //第二个驾车搜索

三、自己绘制折线

接下来，我们在回调函数setSearchCompleteCallback中，把搜索完毕的路线绘制出来。

注意哦，这里是两个搜索的路线都绘制出来了哦~~

就这么简单的三句话，很简单吧。

第一句、获取数组

第二句、创建折线

第三句、添加折线覆盖物

driving.setSearchCompleteCallback(function(){
         
    var pts = driving.getResults().getPlan(0).getRoute(0).getPath();    //通过驾车实例，获得一系列点的数组
    
    var polyline = new BMap.Polyline(pts);     
            map.addOverlay(polyline);

}

这个时候，整个驾车导航就是这个样子滴，简直充满了喜感，像一条蚯蚓呢 O(∩\_∩)O~

![2011082614565083.jpg][]

四、添加起点、终点、途经点marker

其实这个途经点，可以做成像百度地图首页的驾车导航那样，有红绿色的起点终点图标。如下图：

![2011082614583973.jpg][]

注意：这一点，大家随意，大家想加marker（可以更换任意的icon图片），或者想加label，甚至是别的什么覆盖物，都是OK的。

API技术咨询
    请先下载百度HI聊天工具
    JS版HI群:1357363
    移动版HI群:1363111

但是呢，我还是喜欢红色的标注啦，我还可以加上文字标注。

所以，我简单地用红色marker加label来表示了。如下图。

![2011082615015065.jpg][]

添加marker和label的代码如下：

五、调整到最佳视野

个人认为setViewport是个非常有用的好东西。因为它可以把你的标注展示到一个最完美的视野内。

如果不加setViewport，你的地图可能只会出现一半的有效视野，而不是完整的3个标注都有。如下图：

![2011082615042757.jpg][]

代码很简单，先来看看[类参考][Link 2]：

![2011082615052674.jpg][]

就是说，只要有点对象数组传进去，系统就会帮你完成最佳视野的展示！！

map.setViewport([myP1,myP2,myP3]);          //调整到最佳视野

小贴士：你可以做一个延时动画，让最佳视野的展示更漂亮！

另外，marker也是可以有动画的，不要忽略了。详见：[http://dev.baidu.com/wiki/static/map/API/examples/?v=1.2&3\_1\#3&1][http_dev.baidu.com_wiki_static_map_API_examples_v_1.2_3_1_3_1]

六、完整代码

<!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>驾车途经点</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
    </head>
    <body>
    <p><input type='button' value='开始' onclick='run();' /></p>
    <div style="width:820px;height:500px;border:1px solid gray" id="container"></div>
    
    </body>
    </html>
    <script type="text/javascript">
    var map = new BMap.Map("container");
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 13);
    map.addControl(new BMap.NavigationControl());               // 添加平移缩放控件
    map.addControl(new BMap.ScaleControl());                    // 添加比例尺控件
    map.addControl(new BMap.OverviewMapControl());              //添加缩略地图控件
    
    var myP1 = new BMap.Point(106.521436,29.532288);    //起点-重庆
    var myP2 = new BMap.Point(108.983569,34.285675);    //终点-西安
    var myP3 = new BMap.Point(116.404449,39.920423);    //终点-北京
    
    window.run = function (){
         
        map.clearOverlays();                        //清除地图上所有的覆盖物
        var driving = new BMap.DrivingRoute(map);    //创建驾车实例
        driving.search(myP1, myP2);                 //第一个驾车搜索
        driving.search(myP2, myP3);                 //第二个驾车搜索
        driving.setSearchCompleteCallback(function(){
         
    var pts = driving.getResults().getPlan(0).getRoute(0).getPath();    //通过驾车实例，获得一系列点的数组
    
    var polyline = new BMap.Polyline(pts);     
            map.addOverlay(polyline);
    
    var m1 = new BMap.Marker(myP1);         //创建3个marker
            var m2 = new BMap.Marker(myP2);
    var m3 = new BMap.Marker(myP3);
            map.addOverlay(m1);
            map.addOverlay(m2);
            map.addOverlay(m3);
    
    var lab1 = new BMap.Label("起点",{position:myP1});        //创建3个label
            var lab2 = new BMap.Label("途径点",{position:myP2});
    var lab3 = new BMap.Label("终点",{position:myP3});   
            map.addOverlay(lab1);
            map.addOverlay(lab2);
            map.addOverlay(lab3);
    
            setTimeout(function(){
         
                map.setViewport([myP1,myP2,myP3]);          //调整到最佳视野
            },1000);
    
        });
    }
    </script>

[API]: http://www.cnblogs.com/milkmap/archive/2011/08/26/2154627.html
[Link 1]: http://dev.baidu.com/wiki/static/map/API/tool/getPoint/
[2011082614495353.jpg]: /images/20220331/ccebefb3357b43c2beb70968e8237e98.png
[2011082614565083.jpg]: /images/20220331/1a167b9436a54b33bc21d2b19600a356.png
[2011082614583973.jpg]: /images/20220331/6cfd481eeda64960a73f2b637c575d60.png
[2011082615015065.jpg]: /images/20220331/f87ca0efaa984ef08fc03a5639ef91b5.png
[2011082615042757.jpg]: /images/20220331/af16adf561764433a9bf999dcac127d1.png
[Link 2]: http://dev.baidu.com/wiki/map/index.php?title=%E7%B1%BB%E5%8F%82%E8%80%83
[2011082615052674.jpg]: /images/20220331/433dc068c9344a89933fad39b9874182.png
[http_dev.baidu.com_wiki_static_map_API_examples_v_1.2_3_1_3_1]: http://dev.baidu.com/wiki/static/map/API/examples/?v=1.2&3_1#3&1