使用地图写路径规划

乐多_L

于 2024-07-30 08:40:24 发布

阅读量119

点赞数 3

文章标签： javascript 开发语言前端

本文链接：https://blog.csdn.net/2301_81449444/article/details/140786833

版权

我们写的路径规划，是根据用户点击中国地图的次数为准的，进入页面，鼠标点击一次，就是需要规划的起点。点击第二次，就是终点，当点击完两次后，路径规划自动执行。
下面是详细代码，只需改变代码中key与密钥的值，改变成自己请求的值即可。

<!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>
		<style type="text/css">
			html,
			body,
			#container {
				width: 100%;
				height: 100%;
			}

			#panel {
				position: fixed;
				background-color: white;
				max-height: 90%;
				overflow-y: auto;
				top: 10px;
				right: 10px;
				width: 280px;
			}

			#panel .amap-call {
				background-color: #009cf9;
				border-top-left-radius: 4px;
				border-top-right-radius: 4px;
			}

			#panel .amap-lib-driving {
				border-bottom-left-radius: 4px;
				border-bottom-right-radius: 4px;
				overflow: hidden;
			}

			.map {
				height: 100%;
				width: 100%;
				float: left;
			}
		</style>
		<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
		<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>

		<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
	</head>

	<body>
		<!-- 结构 -->
		<div id="container" class="map"></div>
		<div id="panel"></div>
		<div class="input-card">
			<h4>左击获取经纬度：</h4>
			<div class="input-item">
				<input type="text" readonly="true" id="lnglat">
			</div>
		</div>

		<!-- 密钥 -->
		<script type="text/javascript">
			window._AMapSecurityConfig = {
				securityJsCode: "密钥",
			};
		</script>
		<!-- key -->
		<script type="text/javascript"
			src="https://webapi.amap.com/maps?v=2.0&key=key的值&plugin=AMap.Driving">
		</script>
		<script type="text/javascript">
			//基本地图加载
			// 创建一个新的AMap地图实例，并将其绑定到页面上id为"container"的div元素上
			var map = new AMap.Map("container", {
				// 允许地图自动调整大小以适应其容器的大小变化  
				resizeEnable: true,
				center: [116.397428, 39.90923], //地图中心点
				zoom: 13 //地图显示的缩放级别
			});
			// 声明变量为起点和终点
			let start, end;
			//为地图注册click事件获取鼠标点击出的经纬度坐标
			let clickCount = 0;
			//构造路线导航类
			var driving = new AMap.Driving({
				map: map,
				panel: "panel"
			});
			// 给map绑定点击事件
			map.on('click', function(e) {
				clickCount++; // 每次点击时增加点击次数
				// 判断奇偶数，当为奇数时，就作为起点
				if (clickCount % 2 == 1) {
					// 第一次点击，设置起点
					document.getElementById("lnglat").value = e.lnglat.getLng(), e.lnglat.getLat();
					start = new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat());
					console.log(start);
					// 否咋就是为偶数时 作为终点
				} else {
					// 第二次点击，设置终点并规划路线
					document.getElementById("lnglat").value = e.lnglat.getLng(), e.lnglat.getLat();
					end = new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat());
					console.log(end);
					// 根据起终点经纬度规划驾车导航路线
					driving.search(start, end, function(status,
						result) {
						// result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
						if (status === 'complete') {
							log.success('绘制驾车路线完成')
						} else {
							log.error('获取驾车数据失败：' + result)
						}
					});
				}
			});
		</script>
	</body>

</html>

乐多_L

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用地图写路径规划

我们写的路径规划，是根据用户点击中国地图的次数为准的，进入页面，鼠标点击一次，就是需要规划的起点。点击第二次，就是终点，当点击完两次后，路径规划自动执行。下面是详细代码，只需改变代码中key与密钥的值，改变成自己请求的值即可。
复制链接

扫一扫