页面展示
<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=你的key"></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.362390,39.938484);
var p4 = new BMap.Point(116.379206,39.916850);
//行车路线规划实例
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('https://s3.bmp.ovh/imgs/2022/04/19/b909ce0571a7227d.png', new BMap.Size(20, 26), { anchor: new BMap.Size(5, 26) }));
map.addOverlay(m);
//自定义终点图标
var n = new BMap.Marker(p2);
n.setIcon(new BMap.Icon('https://s3.bmp.ovh/imgs/2022/04/19/cc19a1e175c642da.png', new BMap.Size(20, 26), { anchor: new BMap.Size(5, 26) }));
map.addOverlay(n);
driving.search(p1, p2, { waypoints: [p3, p4] });//waypoints表示途经点
</script>
评论区