gongdecai
/
wangluohuoyun-app


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
							<!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">
		<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			html,
			body,
			#container {
				height: 100%;
				width: 100%;
			}

			.distance {
				background-color: #00000061;
				position: absolute;
				bottom: 20px;
				right: 20px;
				color: white;
				padding: 6px 10px;
				border-radius: 6px;
			}
		</style>
	</head>
	<body>
		<div id="container"></div>
		<div id="distance" class='distance'></div>
		<script
			src="https://webapi.amap.com/maps?v=2.0&key=211dd6f989e719022aaf47ddb0659c47&plugin=AMap.Scale,AMap.ToolBar,AMap.Geocoder,AMap.Geolocation,Geolocation,AMap.Driving">
		</script>
		<script src="https://webapi.amap.com/loca?v=2.0.0&key=211dd6f989e719022aaf47ddb0659c47"></script>
		<script>
			function getQuery(name) {
				// 正则：[找寻'&' + 'url参数名字' = '值' + '&']（'&'可以不存在）
				let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
				let r = window.location.search.substr(1).match(reg);
				console.log(r);
				if (r != null) {
					// 对参数值进行解码
					return decodeURIComponent(r[2]);
				}
				return null;
			}
			let starLnglat = getQuery('lat').toString().split(',');
			let endLnglat = getQuery('unsendaddress').toString().split(',')
			console.log(endLnglat,111111111)
			// let starLnglat = [40.243655, 122.114407]
			console.log('---------------------')
			console.log(starLnglat)
			var map = new AMap.Map('container', {
				zoom: 12,
				center: [starLnglat[1], starLnglat[0]],
				resizeEnable: true
			});
			map.clearMap();
			var startIcon = new AMap.Icon({
				size: new AMap.Size(25, 25),
				image: './img/1.png',
				imageSize: new AMap.Size(25, 25),
			});
			/*
			 * 驾车策略 
			 * AMap.DrivingPolicy.LEAST_TIME           最快捷模式
			 * AMap.DrivingPolicy.LEAST_FEE            最经济模式
			 * AMap.DrivingPolicy.LEAST_DISTANCE       最短距离模式
			 * AMap.DrivingPolicy.REAL_TRAFFIC         考虑实时路况
			 */
			var drivingOption = {
				policy: AMap.DrivingPolicy
					.LEAST_TIME, // 其它policy参数请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingPolicy
				ferry: 1, // 是否可以使用轮渡
				map: map,
				hideMarkers: false, // 设置隐藏路径规划的起始点图标
				autoFitView: true
			}
			// var dis = getDistance(starLnglat[1], starLnglat[0], endLnglat[1], endLnglat[0])
			var dis = '距离'+getQuery('distance')+'公里'
			document.getElementById("distance").innerHTML = dis
			// console.log(dis)
			render(endLnglat[1], endLnglat[0])

			// function getDistance(lat1, lng1, lat2, lng2) {
			// 	function Rad(d) {
			// 		return d * Math.PI / 180.0;
			// 	}
			// 	if (!lat1 || !lng1) {
			// 		return '';
			// 	}
			// 	// lat1用户的纬度
			// 	// lng1用户的经度
			// 	// lat2商家的纬度
			// 	// lng2商家的经度
			// 	let radLat1 = Rad(lat1);
			// 	let radLat2 = Rad(lat2);
			// 	let a = radLat1 - radLat2;
			// 	let b = Rad(lng1) - Rad(lng2);
			// 	let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) *
			// 		Math.pow(
			// 			Math.sin(b / 2), 2)));
			// 	s = s * 6378.137;
			// 	s = Math.round(s * 10000) / 10000;
			// 	s = '距离' + s.toFixed(2) + '公里' //保留两位小数
			// 	return s
			// }

			function render(endLng, endLat) {
				// 构造路线导航类
				var driving = new AMap.Driving(drivingOption)
				// 根据起终点经纬度规划驾车导航路线
				driving.search(new AMap.LngLat(starLnglat[1], starLnglat[0]), new AMap.LngLat(endLng, endLat), function(status,
					result) {
					if (status === 'complete') {
						console.log('绘制驾车路线完成')
					} else {
						console.log('获取驾车数据失败：' + result)
					}
				});
				// var capitals = [{
				// 	center: [116.42, 39.93123],
				// }, {
				// 	center: [116.41, 39.92132],
				// }, {
				// 	center: [116.40, 39.91122],
				// }];
				var capitals = [];
				var facilities = [];
				for (var i = 0; i < capitals.length; i++) {
					var marker = new AMap.Marker({
						position: new AMap.LngLat(capitals[i].center[0], capitals[i].center[1]),
						offset: new AMap.Pixel(-10, -10),
						icon: startIcon,
					});
					facilities.push(marker);
				}
				map.add(facilities);
			}
			// map.on('click', clickHandler)

			function clickHandler(e) {
				map.clearMap();
				var endLng = e.lnglat.getLng();
				var endLat = e.lnglat.getLat();
				render(endLng, endLat)
			}
		</script>

		<script>
		</script>
	</body>
</html>