百度地图获取两坐标点之间的驾车路线所有坐标

最新推荐文章于 2022-07-27 10:45:20 发布

iT_MaNongZYQ

最新推荐文章于 2022-07-27 10:45:20 发布

阅读量1.1k

点赞数 3

分类专栏：前端文章标签： js html javascript 百度定位

本文链接：https://blog.csdn.net/iT_MaNongking/article/details/117062399

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

百度地图获取两坐标点之间的驾车路线所有坐标

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<style type="text/css">
			#box {
				width: 100%;
				height: 100%;
				display: flex;
			}

			.iput {
				margin: 20px;
			}

			#allmap {
				width: 60%;
				height: 100%;
			}

			button {
				width: 100px;
				height: 30px;
				background-color: #108CEE;
				font-size: 16;
				color: white;
			}

			#content {
				
				font-size: 16px;
				color: #000;
				width: 40%;
				height: 100%;
				text-align: center;
			}

			#content input {
				height: 30px;
				width: 465px;
			
			}
		</style>
		<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的百度key&plugin=AMap.Driving"></script>

		<title>起点和终点之间的百度轨迹坐标</title>
	</head>
	<body>
		<div id="box">
			<div id="content">
				<h3>起点和终点之间的百度轨迹坐标</h3>
				<div class="iput"> 开始经度纬度：<input type="text" placeholder="示例:109.343826,35.006431" name="" id="loglat_one" value="" /></div>
				<div class="iput">结束经度纬度：<input type="text" name="" placeholder="示例:109.399019,34.761730" id="loglat_two" value="" /></div>
				<div style="text-align: center;"> <button type="button" style="" onclick="loadLine()">绘线</button></div>
				<div><br /><textarea rows="34" cols="80" id="point"></textarea></div>
			</div>
			<div id="allmap">

			</div>

		</div>
	</body>
	<script type="text/javascript">
		// 百度地图API功能
		var map = new BMap.Map("allmap", {
			enableMapClick: false //关闭鼠标默认点击
		}); //创建Map实例
		//初始化  调用centerAndZoom方法对地图初始化
		map.centerAndZoom(new BMap.Point(116.404, 39.915), 13);
		map.enableScrollWheelZoom();
		map.addControl(navigationControl);
		var longpatStr
		var reg = /,$/gi; //此处是正则
		function loadLine() {
			var loglat_one = $("#loglat_one").val()
			var loglat_two = $("#loglat_two").val()
			// var myP1 = new BMap.Point(109.3438260696798,35.00643134507001);    //起点
			//   var myP2 = new BMap.Point(109.39901976017374,34.76173083440453); 
			//终点
			var myP1 = new BMap.Point(parseFloat(loglat_one.split(",")[0]), parseFloat(loglat_one.split(",")[1])); //起点
			var myP2 = new BMap.Point(parseFloat(loglat_two.split(",")[0]), parseFloat(loglat_two.split(",")[1])); //终点
			var driving = new BMap.DrivingRoute(map, {
				onSearchComplete: function(results) {
					if (driving.getStatus() == BMAP_STATUS_SUCCESS) {
						longpatStr = "";
						var pts = driving.getResults().getPlan(0).getRoute(0).getPath(); //通过驾车实例，获得一系列点的数组
						var paths = pts.length;
						for (var i = 0; i < paths; i++) {
							console.log(pts[i].lng + " " + pts[i].lat);
							longpatStr += parseFloat(pts[i].lat) + "|" + parseFloat(pts[i].lng) + ","
						}
						longpatStr = longpatStr.replace("undefined", "");
						longpatStr = longpatStr.replace(reg,"");
						$("#point").val(longpatStr)
						line(longpatStr)
					}

				}
			}, {
				renderOptions: {
					map: map,
					autoViewport: true
				}
			}); 
			//驾车实例
			driving.search(myP1, myP2);
		}

		function line(lonlat) {
			var co = lonlat.split(",");
			var pointAttr = new Array();
			for (var i = 0; i < co.length-1; i++) {
				var loglats = co[i].split("|")
				var point = new BMap.Point(loglats[1], loglats[0])
				pointAttr.push(point);
			}
			var polyline = new BMap.Polyline(pointAttr, {
				strokeColor: "#cc0000",
				strokeWeight: 5,
				strokeOpacity: 0.5
			});
			map.addOverlay(polyline);

			var loglats = co[0].split("|")
			map.centerAndZoom(new BMap.Point(loglats[1], loglats[0]), 13);
		}
	</script>
</html>

iT_MaNongZYQ

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
百度地图获取两坐标点之间的驾车路线所有坐标

百度地图获取两坐标点之间的驾车路线所有坐标<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> #box { wid
复制链接

扫一扫