php 高德API 导航

最新推荐文章于 2024-07-28 09:24:42 发布

MeetBetterMe

最新推荐文章于 2024-07-28 09:24:42 发布

阅读量934

点赞数

分类专栏： PHP

本文链接：https://blog.csdn.net/u012371137/article/details/44882641

版权

PHP 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>步行路径规划</title> 
	<style type="text/css"><!-- 样式可以自己调试-->
		body{
			margin:10%;
			height:70%;
			width:50%;
			left:15%;
			position:absolute;
		}
		#mapContainer{
			position: absolute;
			top:0;
			left:0;
			right:0;
			bottom:0;
		}
		
		#tip{
			min-height:47px;
			max-width:230px;
			background-color:#fff;
			padding-left:10px;
			padding-right:10px;
			position:absolute;
			bottom:10px;
			font-size:12px;
			right:10px;
			border-radius:3px;
			border:1px solid #ccc;
		}
		#tip input[type="button"]{
			margin-top:10px;
			background-color: #0D9BF2;
			height:5%;
			text-align:center;
			line-height:25px;
			color:#fff;
			font-size:14px;
			border-radius:3px;
			outline: none;
			border:0;
			cursor:pointer;
		}
	</style>
	
</head>
<body>		
	<div id="mapContainer" ></div>
    <div id="tip"> 
		<input type="button" value="步行导航查询" οnclick="walking_route()"/>
		<div id="result"> </div>
	</div>
	
	<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=(你在高德上申请的KEY)"></script>
	<script type="text/javascript">		
		var route_text, steps;
		var polyline;
		//基本地图加载
		var map = new AMap.Map("mapContainer", {
			resizeEnable: true,
	    	view: new AMap.View2D({
	        center:new AMap.LngLat(114.363555,30.51773),//地图中心点(华中师范大学博雅广场)
	        zoom:15 //地图显示的缩放级别
	        })
	    });

<span style="white-space:pre">		</span>//加载地图工具条插件
<span style="white-space:pre">		</span>map.plugin(["AMap.ToolBar"],function(){<span style="white-space:pre">		</span>
<span style="white-space:pre">		</span>toolBar = new AMap.ToolBar();
<span style="white-space:pre">		</span>map.addControl(toolBar);<span style="white-space:pre">		</span>
<span style="white-space:pre">		</span>});
<span style="white-space:pre">		</span>
<span style="white-space:pre">		</span>//加载比例尺插件
<span style="white-space:pre">		</span>map.plugin(["AMap.Scale"], function(){<span style="white-space:pre">		</span>
<span style="white-space:pre">			</span>scale = new AMap.Scale();
<span style="white-space:pre">			</span>map.addControl(scale);
<span style="white-space:pre">		</span>});


		//起、终点
		var start_xy = new AMap.LngLat(114.363561,30.518664);//九号教学楼
		var end_xy = new AMap.LngLat(114.364699,30.512648);//研究生院 
		//步行导航
		function walking_route() {
			var MWalk;
		    AMap.service(["AMap.Walking"], function() {        
		        MWalk = new AMap.Walking(); //构造路线导航类 
		        //根据起终点坐标规划步行路线
		        MWalk.search(start_xy, end_xy, function(status, result){
		        	if(status === 'complete'){
		        		walk_routeCallBack(result);
		        	}
		        }); 
		    });
		}
		//导航结果展示
		function walk_routeCallBack(data) {
			var routeS = data.routes;
				if (routeS.length <= 0) {
					document.getElementById("result").innerHTML = "未查找到任何结果!<br />建议：<br />1.请确保所有字词拼写正确。<br />2.尝试不同的关键字。<br />3.尝试更宽泛的关键字。";
				} 
				else { 
					route_text="";
				 	for(var v =0; v< routeS.length;v++){
				 		//步行导航路段数
						steps = routeS[v].steps;
						var route_count = steps.length;
						//步行距离（米）
						var distance = routeS[v].distance;
						//拼接输出html
						for(var i=0 ;i< steps.length;i++) {
							route_text += "<tr><td align=\"left\" onMouseover=\"walkingDrawSeg('" + i + "')\">" + i +"." +steps[i].instruction  + "</td></tr>";
						}
					}
					//输出步行路线指示
					route_text = "<table cellspacing=\"5 px\" ><tr><td style=\"background:#e1e1e1;\">路线</td></tr><tr><td><img src=\"http://code.mapabc.com/images/start.gif\" />  九号教学楼</td></tr>" + route_text + "<tr><td><img src=\"http://code.mapabc.com/images/end.gif\" />  研究生院</td></tr></table>";
					document.getElementById("result").innerHTML = route_text;
					walkingDrawLine();
				}
			}
		//绘制步行导航路线
		function walkingDrawLine() {
		    //起点、终点图标
			var sicon = new AMap.Icon({
				image: "http://api.amap.com/Public/images/js/poi.png",
				size:new AMap.Size(44,44),
				imageOffset: new AMap.Pixel(-334, -180)
			});
			var startmarker = new AMap.Marker({
				icon : sicon, //复杂图标
				visible : true, 
				position : start_xy,
				map:map,
				offset : {
					x : -16,
					y : -40
				}
			});
			var eicon = new AMap.Icon({
				image: "http://api.amap.com/Public/images/js/poi.png",
				size:new AMap.Size(44,44),
				imageOffset: new AMap.Pixel(-334, -134)
			});
			var endmarker = new AMap.Marker({
				icon : eicon, //复杂图标
				visible : true, 
				position : end_xy,
				map:map,
				offset : {
					x : -16,
					y : -40
				}
			}); 
			//起点到路线的起点 路线的终点到终点 绘制无道路部分
			var extra_path1 = new Array();
			extra_path1.push(start_xy);
			extra_path1.push(steps[0].path[0]);
			var extra_line1 = new AMap.Polyline({
				map: map,
				path: extra_path1,
				strokeColor: "#9400D3",
				strokeOpacity: 0.7,
				strokeWeight: 4,
				strokeStyle: "dashed",
				strokeDasharray: [10, 5]
			});
		
			var extra_path2 = new Array();
			var path_xy = steps[(steps.length-1)].path;
			extra_path2.push(end_xy);
			extra_path2.push(path_xy[(path_xy.length-1)]);
			var extra_line2 = new AMap.Polyline({
				map: map,
				path: extra_path2,
				strokeColor: "#9400D3",
				strokeOpacity: 0.7,
				strokeWeight: 4,
				strokeStyle: "dashed",
				strokeDasharray: [10, 5]
			});
		
			var drawpath = new Array(); 
			for(var s=0; s<steps.length; s++) {
				var plength = steps[s].path.length;
				for (var p=0; p<plength; p++) {
					drawpath.push(steps[s].path[p]);
				}
			}
			var polyline = new AMap.Polyline({
				map: map,
				path: drawpath,
				strokeColor: "#9400D3",
				strokeOpacity: 0.7,
				strokeWeight: 4,
				strokeDasharray: [10, 5]
			});
			map.setFitView();
		}	
		//绘制步行导航路段
		function walkingDrawSeg(num) {
			var drawpath1 = new Array();
			drawpath1 = steps[num].path;
			if(polyline != null) {
				polyline.setMap(null);
			}
			polyline = new AMap.Polyline({
					map: map,
					path: drawpath1,
					strokeColor: "#FF3030",
					strokeOpacity: 0.9,
					strokeWeight: 4,
					strokeDasharray: [10, 5]
				});
		
			map.setFitView(polyline);
		}
	</script> 
</body>  
</html>