<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>百度地图途经点</title>
<link rel="stylesheet" href="css/roadForecast.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/public.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
</head>
<body>
<div class="main">
<!-- 顶部-->
<div class="roadForecastHead">
<div class="roadForecastHeadLeft">
<h2>拉K平台路况预报</h2>
<p>提前了解路况 运输畅通无阻</p>
</div>
<div class="roadForecastHeadRight">
<div class="roadForecastHeadRightText">
<p>城市/区:朝阳区</p>
<p>天气：晴 / 6°C </p>
<p>风向：西 / 6级</p>
<p>2020-12-23</p>
</div>
</div>
</div>
<div class="roadForecastContent">
<!-- 地图-->
<div id="container">
</div>
<!-- 二维码-->
<div class="roadForecastContentFoot">
<div class="roadForecastContentFootLine"></div>
<div class="roadForecastContentFootEwm">
<img src="images/ewm.png" alt="">
</div>
<div class="roadForecastContentFootText">拉K大件物流平台制作</div>
</div>
</div>
</div>
<script>
<!-- 创建地图-->
var map = new BMap.Map('container'); // 创建Map实例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
//
map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件
map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件
let arrayPoint = [
{lat: 106.521436, lng: 29.532288},
{lat: 121.443532, lng: 31.24603},
{lat: 116.404449, lng: 39.920423},
];
// let arrayPoint = [
// {lat: 121.443532, lng: 31.24603},
// {lat: 121.481477, lng: 31.240103},
// {lat: 121.493262, lng: 31.237015},
// {lat: 121.494987, lng: 31.230099},
// {lat: 121.489382, lng: 31.225034},
// {lat: 121.512953, lng:31.219846},
// {lat: 121.510222, lng:31.228122},
// {lat: 121.520715, lng:31.232198},
// {lat: 121.515828, lng:31.239485},
// {lat: 121.498724, lng:31.238868},
// {lat: 121.496568, lng:31.227505},
// {lat: 121.479177, lng:31.244178},
// {lat: 121.496712, lng:31.249365},
// {lat: 121.503323, lng:31.260972},
// {lat: 121.512953, lng:31.276158},
// {lat: 121.481764, lng:31.26838},
// {lat: 121.464804, lng:31.285293},
// {lat: 121.468685, lng:31.251587},
// {lat: 121.47041, lng:31.245289},
// {lat: 121.489094, lng:31.19106},
// ]
let arrayList = [];
for (let i = 0; i < arrayPoint.length; i++) {
arrayList.push(new BMap.Point(arrayPoint[i].lat, arrayPoint[i].lng))
}
showPoly(arrayList);
function showPoly(pointList) {
//循环显示点对象
console.log(pointList);
var group = Math.floor(pointList.length / 11);
var mode = pointList.length % 11;
if (pointList.length<13){
var driving = new BMap.DrivingRoute(map, {
renderOptions: {
map: map,
autoViewport: true
},
//改变途经点的颜色
onPolylinesSet: function(Route) {
console.log(Route);
for (var i = 0; i < Route.length; i++) {
var polyline = Route[i].getPolyline(); //获取线条遮挡物
polyline.setStrokeColor("red"); //设置颜色
polyline.setStrokeWeight(6); //设置宽度
polyline.setStrokeOpacity(0.8); //设置透明度
}
},
//添加自定义图标
onMarkersSet: function(routes) {
//标注点完成回调
map.clearOverlays(); //删除点
// var myStart = new BMap.Marker(start, { icon: startIcon });
// map.addOverlay(myStart); //添加自定义起点图标
// var myEnd = new BMap.Marker(end, { icon: endIcon });
// map.addOverlay(myEnd); //添加自定义终点图标
// var myCurrent = new BMap.Marker(current, { icon: currentIcon });
// map.addOverlay(myCurrent); //添加自定义途径点图标
},
onSearchComplete: function (results) {
if (driving.getStatus() == BMAP_STATUS_SUCCESS) {
var plan = driving.getResults().getPlan(0);
var num = plan.getNumRoutes();
for (var j = 0; j < num; j++) {
var pts = plan.getRoute(j).getPath(); //通过驾车实例，获得一系列点的数组
var polyline = new BMap.Polyline(pts);
map.addOverlay(polyline);
}
}
},
});
}else{
for (c = 0; c < pointList.length; c++) {
var marker = new BMap.Marker(pointList[c]);
map.addOverlay(marker);
//将途经点按顺序添加到地图上
var label = new BMap.Label(c + 1, {offset: new BMap.Size(20, -10)});
marker.setLabel(label);
}
var driving = new BMap.DrivingRoute(map, {
onSearchComplete: function (results) {
if (driving.getStatus() == BMAP_STATUS_SUCCESS) {
var plan = driving.getResults().getPlan(0);
var num = plan.getNumRoutes();
for (var j = 0; j < num; j++) {
var pts = plan.getRoute(j).getPath(); //通过驾车实例，获得一系列点的数组
var polyline = new BMap.Polyline(pts);
map.addOverlay(polyline);
}
}
},
});
}
//途经点不超过十个
console.log(pointList.length);
if (pointList.length<13){
if (mode != 0) {
var waypoints = pointList.slice(1, pointList.length - 1);//多出的一段单独进行search
driving.search(pointList[0], pointList[pointList.length - 1], {waypoints: waypoints});
}
}else{
for (var i = 0; i < group; i++) {
var waypoints = pointList.slice(i * 11 + 1, (i + 1) * 11);
//注意这里的终点如果是11的倍数的时候，数组可是取不到最后一位的，所以要注意终点-1喔。感谢song141的提醒，怪我太粗心大意了~
driving.search(pointList[i * 11], pointList[(i + 1) * 11 - 1], {waypoints: waypoints});//waypoints表示途经点
}
if( mode != 0){
var waypoints = pointList.slice(group*11,pointList.length-1);//多出的一段单独进行search
driving.search(pointList[group*11],pointList[pointList.length-1],{waypoints:waypoints});
}
}
map.setViewport(pointList);
}
</script>
</body>
</html>
网友评论