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

最新推荐文章于 2023-03-22 20:30:02 发布
最新推荐文章于 2023-03-22 20:30:02 发布
阅读量1.3k 收藏 3
点赞数
分类专栏： 前端 持续更新 文章标签： 街景地图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40860137/article/details/112183757
版权 

<!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
    评论
专栏目录
高德地图路径规划2.0的算法是什么，如何用代码实现
weixin_35756690的博客
01-08 3271
高德地图路径规划2.0的算法是使用Dijkstra算法进行最短路径规划的。Dijkstra算法是一种贪心算法，它能够在有向图中求出单源最短路径。它的基本思想是，对于一个起点，求出到所有点的最短路径。 在代码中实现Dijkstra算法，需要先建立一张邻接矩阵，表示图中所有边的权值。然后，初始化一个数组dis，用来记录每个点到起点的距离。接着，从起点开始遍历整张图，每次求出一个最近的点，并更新它到其他...
高德地图简单点位+轨迹+描述
木玄客的博客
03-23 513
基于vue3 setup模式，简单的高德地图开发(标记点、轨迹、描述)。
aMap:高德地图模块源码（含iOS和Android）
03-23
概述 高德地图模块源码（含iOS和Android） API的aMap模块是对高德地图移动端开放SDK进行的一次封装。目的是为了让APICloud的广大开发者只需用html + js即可快速，高效的集成高德移动端地图到自己的应用内。因此需在高德开放平台提供的SDK基础上，按照APICloud平台的模块开发规范，对高德地图的SDK提供的接口进行一层封装。其中涉及到UI的部分功能无法完全彻底的封装。因此开源此模块源码，原生开发者可以在此模块的基础上继续完善该模块的其他接口。开发者很快地在APICloud上开发出各式各样，效果炫酷的app。 模块接口文档 / *标题：aMap说明：高德地图* / 来自于：官方 基础类 室内地图 标明，气泡类 覆盖物类 搜索类 离线地图类 经纬度坐标转换，轨迹纠偏 论坛示例 为帮助用户更好的变频器的使用模块，论坛维护了一个，示例中包
如何使用高德地图 API 做一个路线规划应用，展示自定义路线
热门推荐
学习笔记
08-25 2万+
如何使用高德地图 API 做一个路线规划应用，展示自定义路线 喜欢骑车转，知道一些比较好的路线，想要分享给别人的时候不知道该怎么分享，有自定义路线的功能就好了。前不久高德推出了手机端的自定义路线功能。 其实 web API 可以实现很具体的路线规则，使用 Amap.DragRoute 类 看例子： 路线推荐： 金刚纂路 https://kylebing.cn/tools/map/#/route/1 官方 DragRoute 的说明 关于路线规则的说明，官方如下，我们主要使用其中的 途经点 功能 ht
高德地图轨迹回放，消息框内展示车辆速度且随车辆移动-升级支持调整速度、回放进度
博客
05-09 9731
使用高德地图回放车辆GPS轨迹，并添加速度和回放进度条，并支持调整，效果如下： 新增的功能： 在基础版本，有如下升级 速度条：可以拖动以调整车辆回放速度，且从当前位置继续回放 进度条：进度条表示车辆已回放的百分比，且拖动进度条车辆定位到相应的位置并继续回放 ###思路分析 高德和marker回放相关的API //主要靠他回放 moveAlong(path:Array,speed:Number,f:Function,circlable:Boolean) //点移动到另一个位置，移动进度条车辆跟随移动
高德地图---路线绘制
06-02
高德地图作为国内领先的地图服务提供商，提供了丰富的API和SDK，帮助开发者实现各种复杂的地图功能。本节将深入探讨如何利用高德地图API实现“运动轨迹的获取”和“运动轨迹的回放”。 首先，我们要理解“运动轨迹...
微信小程序 高德地图路线规划实现过程详解
10-16
在微信小程序中实现高德地图路线规划的过程涉及多个步骤，首先需要了解微信小程序的基本环境和高德地图API的使用。本文将详细介绍这个实现过程，并提供相关的代码示例。 1. 准备工作： - 注册并获取微信小程序的...
JS高德地图模拟驾车路线规划绘制代码
06-11
在JavaScript编程领域，高德地图API是一个常用的工具，它提供了丰富的功能，包括地图展示、位置检索、路线规划等。本文将深入探讨如何使用JS高德地图API来模拟驾车路线规划并绘制代码，以便开发者能够更好地理解和...
高德地图AMap-adcode-citycode
最新发布
05-15
高德地图AMap-adcode-citycode
python高德地图路径规划api代码
05-14
高德地图路径规划api的批量获取代码
高德地图-实时导航，路径轨迹显示
11-13
高德地图-实时导航，路径轨迹显示 [注：本内容来自网络，在此分享仅为帮助有需要的网友，如果侵犯了您的权利，麻烦联系我，我会第一时间删除，谢谢您。]
高德地图导航源代码
04-05
高德地图导航源代码，用android studio写的，亲测可用，实现了步行导航，汽车导航和骑车导航，还有语音提示功能。
SpringBoot整合高德地图，路径规划API
周不老的博客
12-13 4827
SpringBoot整合高德地图，路径规划API 前期工作准备 1.注册高德地图 注册高德地图，并实名认证。 2.获取key 获取key的方法如下: https://lbs.amap.com/api/webservice/guide/create-project/get-key 3.调用API 调用方法如下： https://lbs.amap.com/api/webservice/guide/api/newroute ...
使用高德地图API实现历史轨迹查询
MonkeyBrothers的博客
05-30 1万+
使用高德地图API完成历史轨迹查询创作背景相关技术设计思路实现难点编码实现实现效果 创作背景 因为对历史轨迹查询比较好奇，所以使用高德地图API简单完成了一个历史轨迹查询的功能。由于初学者，程序或者教程如有存在不恰当之初请大家多多指点，我一定及时更改。 相关技术 项目是基于WEB端实现的，后台使用了SpringBoot，前台使用了layui框架搭建一个简单的页面。 key的申请 ：开发者需要先去...
在调用高德地图路径规划api时的一个坑
m0_62497768的博客
03-22 502
调用高德地图路径规划api时遇到的一个参数设置的小坑
Java图商地图（百度、高德、腾讯）路线规划
weixin_51591287的博客
09-18 1504
Java图商地图（百度、高德、腾讯）路线规划，根据返回的json，从中抽取自己需要的，我下面统一选取图商根据经度纬度（GPS坐标）路线规划返回的路径距离（注意坐标系，我这里统一选取WGS84的坐标系，百度地图可以直接使用WGS84坐标，而腾讯、高德【默认都是Gcj02】得需要自己转坐标系，转坐标系我自己写的另外一篇博客中有）
高德地图批量统计驾车轨迹的用时及总里程
a1272146的博客
05-23 1万+
var http= require('http'); var qs=require('querystring'); var jsonData = { "state": true, "info": "成功", "data": [ {"coordinate":[116.70963,23.3923],"route_sequence":
python高德地图路径规划_「Python」利用高德地图做你想做之事
weixin_39580950的博客
12-05 666
玩grasshopper基本上都知道OpenStreetMap 这个地图网站，毕竟有一个好用的地图插件，可以在Rhino中绘制出所需，但是一个不好的地方就在于国内的数据量太少，无法满足我们的需求。此次所讲的高德地图基本上可以解决我们的痛点，当然百度地图也可以哦。涉及知识主要是python爬去数据，俗称爬虫，设计到的函数库为request和beautifulsoup。当然我刚开始玩，所以可能多有不对...
高德地图实现路线规划+轨迹回放（显示车牌）
小帅丶的专栏
11-02 2768
基于高德地图实现路线规划+轨迹回放
uniapp高德地图路线规划
09-13
使用uniapp和高德地图进行路线规划，可以按照以下步骤进行操作: 1. 首先，引入高德地图的相关组件和插件。在代码中，可以看到通过`import Amap from "../../utils/lyn4ever-gaode.js";`来引入了高德地图插件。 2. 在`data`函数中定义地图的经纬度和标记点信息。在代码中，`longitude`表示地图的经度，`latitude`表示地图的纬度，`markers`表示标记点的信息，`polyline`表示路线的信息。 3. 在`onLoad`生命周期函数中，调用高德地图插件的`line`方法和`markers`方法来实现路线规划和标记点显示。在代码中，`startPoi`表示起点的经纬度，`endPoi`表示终点的经纬度，`wayPoi`表示途径点的经纬度。通过调用`Amap.line`方法和`Amap.markers`方法，分别返回路线和标记点的信息，并将其添加到`polyline`和`markers`数组中。 4. 最后，在模板中使用`<map>`组件来显示地图，并将`latitude`、`longitude`、`markers`、`polyline`等变量绑定到相应的属性上，从而实现地图的展示和路线的渲染。 总结起来，uniapp和高德地图路线规划的实现步骤包括引入高德地图插件、定义地图的经纬度和标记点信息、调用高德地图插件的路线规划和标记点方法、在模板中显示地图和路线。这样就可以实现uniapp中使用高德地图进行路线规划的功能。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值