高德地图线路规划-路线分段源码分享

最新推荐文章于 2023-10-19 10:08:21 发布

涵信

最新推荐文章于 2023-10-19 10:08:21 发布

阅读量1.3k

点赞数

分类专栏：前端持续更新文章标签：街景地图

本文链接：https://blog.csdn.net/qq_40860137/article/details/112183757

版权

前端同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

持续更新

4 篇文章 1 订阅

订阅专栏


<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>浏览器精确定位</title>
      <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
	  
    <style>
        html,body,#container{
            height:100%;
        }
        .info{
            width:26rem;
        }
		.amap-geolocation-con{
			margin-bottom: 4.375rem;
		}
    </style>
<body>
	<div id='container'></div>
	</body>
	<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
	<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=xxxxxxx[高德官网申请]&plugin=AMap.Driving"></script>
	<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
	<script>
		var linedata = [
			{
				'浙al': [
					{
						"addressName": "测试002",
						"position":[
							"113.899648",
							"22.529287"
						],
						"createdAt": "2020-05-19 14:03:35.000"
					},
					{
						"addressName": "深圳百度国际大厦",
						"position":[
							"116.379028", 
							"39.865042"
						],
						"createdAt": "2020-05-19 14:10:14.000",
						
					}
				]
			},
			{
				'浙cl': [
					{
						"addressName": "测试002",
						"position":[
							"116.427281",
							 "39.903719"
						],
						"createdAt": "2020-05-19 14:03:35.000"
					},
					{
						"addressName": "深圳百度国际大厦",
						"position":[
							"116.379028",
							 "39.885042"
						],
						"createdAt": "2020-05-19 14:10:14.000",
						
					}
				]
			},
			{
				'浙dl': [
					{
						"addressName": "测试002",
						"position":[
							"120.04238","30.24516"
						],
						"createdAt": "2020-05-19 14:03:35.000"
					},
					{
						"addressName": "深圳百度国际大厦",
						"position":[
							"120.14238","31.24516"
						],
						"createdAt": "2020-05-19 14:10:14.000",
						
					}
				]
			}
		]
		const colors = ['#DC143C', '#5F9EA0', '#00BFFF', '#C71585', '#6495ED',
		  '#008B8B', '#FFFF00', '#FFD700', '#FFDEAD', '#FF4500',
		  '#FF8C00', '#8B4513', '#FFF5EE', '#FF7F50', '#FF6347'];
		var truckDriving;
		var obData = {};
		var lineArr = [];//全部经纬度
		for (var i = 0; i < linedata.length; i++) {
			//console.log(linedata[i]);
			var item = Object.keys(linedata[i])[0];
			obData[item] = [];
			for (var j = 0; j < linedata[i][item].length; j++) {
				  lineArr.push(
					new AMap.LngLat(linedata[i][item][j].position[0], linedata[i][item][j].position[1])
				  );
				  obData[item].push(
					 new AMap.LngLat(linedata[i][item][j].position[0], linedata[i][item][j].position[1])
				  )
			}
		}
		console.log(obData)
		console.log(lineArr)
		  var  startPoint = lineArr[0];
		  var  endPoint = lineArr[lineArr.length - 1];
		  var waypoints = lineArr.concat();
		  waypoints.pop();
		  waypoints.shift();
		var map = new AMap.Map("container", {
				resizeEnable: true,
			   center: lineArr[0],
				zoom: 13 //地图显示的缩放级别
			});
		var routeLine_obj ;
		 AMap.plugin("AMap.Driving", function () {
			  truckDriving = new AMap.Driving({
				map: map,
			  });
			  // 根据起终点经纬度规划驾车导航路线
			  truckDriving.search(
				startPoint,
				endPoint,
				{
				  waypoints: waypoints,
				},
				function (status, result) {
				  console.log(status);
				  console.log(result);
				  // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
				  if (status === "complete") {
					alert("绘制驾车路线完成");
					if (result.routes && result.routes.length) {
					  drawRoute(result.routes[0], "#FF6347");
					}
				  } else {
					alert("获取驾车数据失败：" + result);
					console.log(result);
				  }
				}
			  );
			    createMarker(waypoints, "途径");
			    createMarker(startPoint, "起点");
				createMarker(endPoint, "终点");
				Object.keys(obData).forEach((item,index) => {		
					var  sPoint = obData[item][0];
					var  ePoint =  obData[item][obData[item].length - 1];
					var wpoints =  obData[item].concat();
					wpoints.pop();
					wpoints.shift();
					 truckDriving.search(
						sPoint,
						ePoint,
						{
						  waypoints: wpoints,
						},
						function (status, result) {
						  console.log(status);
						  console.log(result);
						  // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
						  if (status === "complete") {
							console.log("绘制驾车路线完成");
							if (result.routes && result.routes.length) {
							  drawRouteHed(result.routes[0], index);
							}
						  } else {
							console.log("获取驾车数据失败：" + result);
						  }
						}
					  );      
				});
		});
		function drawRoute(route, color) {
	      var path = parseRouteToPath(route);
	      // 生成 折线路线
	      routeLine_obj = new AMap.Polyline({
	        zIndex: 51,
	        path: path,
	        isOutline: true,
	        outlineColor: "#ffeeee",
	        borderWeight: 1,
	        strokeWeight: 6,
	        strokeColor: color,
	        // strokeStyle: 'dashed',
	        // lineJoin: 'round'
	      });
	      routeLine_obj.setMap(map);
	    };
		function parseRouteToPath(route) {
		  const path = [];
		  for (let i = 0, l = route.steps.length; i < l; i++) {
			const step = route.steps[i];
			for (let j = 0, n = step.path.length; j < n; j++) {
			  path.push(step.path[j]);
			}
		  }
		  return path;
		};
		function  createMarker(markArr, type) {
				let iconUrl = "",
				siteName = "";
			  if (type == "途径") {
				// -------- 中途 站点-----------
				markArr.forEach((item, index) => {
				  // 创建一个 Icon
				  const siteIcon = new AMap.Icon({
					// 图标尺寸
					size: new AMap.Size(22, 34),
					// 图标的取图地址
					// image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
					// image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
					image:
					  "//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png",
					// 图标所用图片大小
					imageSize: new AMap.Size(22, 34),
					// 图标取图偏移量
					// imageOffset: new AMap.Pixel(0, 0)
				  });
				  const siteMarker = new AMap.Marker({
					// text: lineName + '路线-' + (index + 1) + '号站点',
					// icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-' + (index + 1) + '.png',
					icon: siteIcon,
					position: item,
					offset: new AMap.Pixel(-10, -32),
					map: map,
				  });
				  siteMarker.setMap(map);
				});
			  } else if (type == "起点") {
				iconUrl = "https://webapi.amap.com/theme/v1.3/markers/n/start.png";
				siteName = "起点";
				let oneMarker = new AMap.Marker({
				  icon: iconUrl,
				  position: markArr,
				  offset: new AMap.Pixel(-9, -32),
				  zIndex: 60,
				  map: map,
				});
				oneMarker.setMap(map);
			  } else {
				iconUrl = "https://webapi.amap.com/theme/v1.3/markers/n/start.png";
				siteName = "终点";
				let endMarker = new AMap.Marker({
				  icon: iconUrl,
				  position: markArr,
				  offset: new AMap.Pixel(-9, -32),
				  zIndex: 60,
				  map: map,
				});
				endMarker.setMap(map);
			  }
    };
	function drawRouteHed(route, index) {
      let path = this.parseRouteToPath(route);
      // 生成 折线路线
      routeLine_obj = new AMap.Polyline({
        zIndex: 52,
        path: path,
        isOutline: true,
        outlineColor: "#ffeeee",
        borderWeight: 1,
        strokeWeight: 6,
        strokeColor: colors[index],
        lineJoin: "round",
        showDir: false,
      });
      routeLine_obj.setMap(map);
    }
	</script>
</html>

展示效果:

作者: 赖导--

涵信

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
高德地图线路规划-路线分段源码分享

<!doctype html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <ti..
复制链接

扫一扫

专栏目录