百度地图绘制驾车途经点路线图

可以先在坐标拾取系统拾取一些点作为测试数据
http://api.map.baidu.com/lbsapi/getpoint/index.html
复制下面的代码到.html文件即可运行,需要联网

<!DOCTYPE html>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<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>  
<script type="text/javascript">  
    var map = new BMap.Map("container");  
    map.centerAndZoom(new BMap.Point(113.288386,23.139859),20);  
    map.addControl(new BMap.NavigationControl());               // 添加平移缩放控件  
    map.addControl(new BMap.ScaleControl());                    // 添加比例尺控件  
    map.addControl(new BMap.OverviewMapControl());              //添加缩略地图控件  
      
    var myP1 = new BMap.Point(113.281774,23.13288); 
    var myP2 = new BMap.Point(113.292157,23.132951);    
    var myP3 = new BMap.Point(113.296208,23.131513);
    var myP4 = new BMap.Point(113.300603,23.130487);
    var myP5 = new BMap.Point(113.301513,23.129129);
      
    window.run = function (){  
        map.clearOverlays();                        //清除地图上所有的覆盖物  
        var driving = new BMap.DrivingRoute(map);    //创建驾车实例  
        driving.search(myP1, myP5);                 //第一个驾车搜索  
        
        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);  
            var m4 = new BMap.Marker(myP4);  
            var m5 = new BMap.Marker(myP5);  

            map.addOverlay(m1);  
            map.addOverlay(m2);  
            map.addOverlay(m3);
            map.addOverlay(m4);
            map.addOverlay(m5);

            var lab1 = new BMap.Label("起点",{position:myP1});        //创建3个label  
            var lab2 = new BMap.Label("途径点1",{position:myP2});  
            var lab3 = new BMap.Label("途径点2",{position:myP3}); 
            var lab4 = new BMap.Label("途径点3",{position:myP4}); 
            var lab5 = new BMap.Label("终点",{position:myP5});            
     
            map.addOverlay(lab1);  
            map.addOverlay(lab2);  
            map.addOverlay(lab3);
            map.addOverlay(lab4);  
            map.addOverlay(lab5);  
    
              
            setTimeout(function(){  
                map.setViewport([myP1,myP2,myP3,myP4,myP5]);          //调整到最佳视野  
            },1000);  
              
        });  
    }  
</script>  
</body>  
</html>  

运行效果


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容