高德路线图规划

最新推荐文章于 2024-08-12 01:25:53 发布

Li370234940

最新推荐文章于 2024-08-12 01:25:53 发布

阅读量52

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/Li370234940/article/details/141100782

版权

<!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%;
				margin: 0;
				padding: 0;
			}
 
			#panel {
				position: fixed;
				background-color: white;
				max-height: 90%;
				overflow-y: auto;
				top: 10px;
				right: 10px;
				width: 280px;
				z-index: 1000;
			}
 
			#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;
			}
		</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"></div>
		<script type="text/javascript">
			window._AMapSecurityConfig = {
				securityJsCode: "0f8e6c7f349f877a4d85c8f7e53320ac",
			};g
		</script>
		<script type="text/javascript"
			src="https://webapi.amap.com/maps?v=2.0&key=4c7f1997b54559d7072f04e17afdfde8&plugin=AMap.Driving"></script>
 
		<script type="text/javascript">
			var map = new AMap.Map("container", {
				resizeEnable: true,
				center: [116.397428, 39.90923], // 默认北京市中心
				zoom: 13 // 缩放级别
			});
 
			var startPoint; // 起点经纬度
			var endPoint; // 终点经纬度
 
			// 构造路线导航类
			var driving = new AMap.Driving({
				map: map,
			});
 
			// 创建函数，根据起点和终点经纬度规划驾车导航路线
			function and(start, end) {
				driving.search(new AMap.LngLat(start[0], start[1]), new AMap.LngLat(end[0], end[1]), function(status, result) {
					if (status === 'complete') {
						console.log('绘制驾车路线完成');
					} else {
						console.error('获取驾车数据失败：' + result);
					}
				});
			}
 
			// 监听地图点击事件获取点击的经纬度坐标
			map.on('click', function(e) {
				var lng = e.lnglat.getLng();
				var lat = e.lnglat.getLat();
 
				if (!startPoint) {
					// 第一次点击，设置为起点
					startPoint = [lng, lat];
					console.log('当前为起点：' + lng + ',' + lat);
				} else {
					// 第二次点击，设置为终点并绘制路线
					endPoint = [lng, lat];
					console.log('当前为终点：' + lng + ',' + lat);
					and(startPoint, endPoint);
 
					// 清空起点和终点，准备下一次点击
					startPoint = null;
					endPoint = null;
				}
			});
		</script>
	</body>
</html>