【行车路径规划】百度地图API，行车路径规划起始点+途经点

weixin_34029949

墨衍会员 · AI 创作全网分发码龄11年

关注

转载最新推荐文章于 2023-12-07 18:03:07 发布 3.3k 阅读 AI 写同款· GEO 优化 ›

为什么80%的码农都做不了架构师？>>>

这是行车路线规划通过起始点，和途经点，绘制出来的路线

输入图片说明

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=eYf9sA6yVTFHlh9ytU4a0EYY"></script>
<title>设置驾车路线途经点</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">

// 百度地图API功能
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
map.enableScrollWheelZoom(true);

//起始点
var p1 = new BMap.Point(116.301934,39.977552);
var p2 = new BMap.Point(116.508328,39.919141);
//途经点
var p3 = new BMap.Point(116.405628,39.9139721);//天安门
var p4 = new BMap.Point(116.455646,39.937433);//体育馆

//行车路线规划实例
var driving = new BMap.DrivingRoute(map, { renderOptions:{ map: map, autoViewport: true}       ,onPolylinesSet:function(Route){
  //当线条添加完成时调用
  for(var i=0;i<Route.length;i++){
          var polyline = Route[i].getPolyline();//获取线条遮挡物
                  polyline.setStrokeColor("#38CA69");//设置颜色
                polyline.setStrokeWeight(5);//设置宽度
                polyline.setStrokeOpacity(1);//设置透明度
  }
  console.log(Route);
},onMarkersSet:function(routes) {
  //当地图标记添加完成时调用
        for (var i = 0; i <routes.length; i++) {
                //判断是否是途经点
                if(typeof(routes[i].Km)=="undefined"){
                        map.removeOverlay(routes[i].marker); //删除起始默认图标
                }else{
                        map.removeOverlay(routes[i].Km); //删除途经默认图标
                }
        }
    }
  });
  
  driving.enableAutoViewport();//自动调整层级
  
  //自定义起点图标
  var m = new BMap.Marker(p1); 
  m.setIcon(new BMap.Icon('http://demo.dingwei.cn/xingfou/public/Home/img/icon_21-25.png',new BMap.Size(20, 26),{anchor: new BMap.Size(10, 26)}));
map.addOverlay(m);
   //自定义终点图标
    var m = new BMap.Marker(p2); 
  m.setIcon(new BMap.Icon('http://demo.dingwei.cn/xingfou/public/Home/img/icon_21-25.png',new BMap.Size(20, 26),{anchor: new BMap.Size(10, 26)}));
map.addOverlay(m);
   //自定义途经图标
    var m = new BMap.Marker(p3); 
  m.setIcon(new BMap.Icon('http://demo.dingwei.cn/xingfou/public/Home/img/icon_21-25.png',new BMap.Size(20, 26),{anchor: new BMap.Size(10, 26)}));
map.addOverlay(m);
   //自定义途经图标
    var m = new BMap.Marker(p4); 
  m.setIcon(new BMap.Icon('http://demo.dingwei.cn/xingfou/public/Home/img/icon_21-25.png',new BMap.Size(20, 26),{
anchor: new BMap.Size(10, 26)//这是图标的偏移量，一般x设置为 图片宽度一半，高度想等，就正确了
    
}));
map.addOverlay(m);
  
driving.search(p1, p2,{waypoints:[p3,p4]});//waypoints表示途经点

</script>

转载于:https://my.oschina.net/Peron/blog/913188