gongdecai
/
wangluohuoyun-huozhuapp


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182
							<!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" />
		<title>运输轨迹</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			html,
			body,
			#container {
				height: 100%;
				width: 100%;
			}
			.content{
				background-color: white;
				position: absolute;
				top: 20px;
				padding: 6px 10px;
				border-radius: 6px;
				width: 90%;
				margin-left: 5%;
				display: flex;
				align-items: center;
			}
			.start,.end{
				display: flex;
			}
			.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 class='content'>
			<div class='start'>
				<div id='sendCity'></div>
				<div id='sendArea'></div>
			</div>
			<div>-----------></div>
			<div class='end'>
				<div id='unloadCity'></div>
				<div id='unloadArea'></div>
			</div>
		</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>
		var _t = getQueryString("obj"); 
				var obj = JSON.parse(decodeURI(_t)) ; 
				console.log('---------------------')
				console.log(obj)
				document.getElementById('sendCity').innerHTML = obj.sendCity
				document.getElementById('sendArea').innerHTML = obj.sendArea
				document.getElementById('unloadCity').innerHTML = obj.unloadCity
				document.getElementById('unloadArea').innerHTML = obj.unloadArea
				
				
				
				function getQueryString(name) {
					var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
					var r = window.location.search.substr(1).match(reg);
					if (r != null) return unescape(r[2]); return null;
				}
			let starLnglat = [40.243655, 122.114407]
			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(122.114407, 40.243655, 122.114407, 42.243655)
			document.getElementById("distance").innerHTML = dis
			console.log(dis)
			render(122.114407, 42.243655)

			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>