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>