google api 地图搜索应用_google地图api搜索-优快云博客

本文链接：https://blog.youkuaiyun.com/xuchen_si/article/details/21555863

本文介绍了一个基于Google Maps API的路线规划系统实现方法。通过HTML、CSS和JavaScript等前端技术，用户可以在网页上输入起点和终点地址来获取驾车路线及距离时间估算。系统还提供了避免高速公路的选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>Driving</title>
		<link rel="stylesheet" type="text/css" href="style.css"></link>
		<script
			src="http://ditu.google.com/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN"
			type="text/javascript"></script>
		<STYLE type=text/css>
			#frmholder { 
			   width: 1000px;
			   heigh:100px;
			   border: 1px solid #000;
			   border-bottom: 0;
			   text-align: center;
			   background: #fff;
			}
			#mapholder {
			   width: 700px;
			   height: 600px;
			   float: left;
			   border: 1px solid #000;
			   background: #fff;
			}
			#dirholder {
			   width: 300px;
			   float: left;
			   border: 1px solid #000;
			   height: 600px;
			   border-left: 0;
			   background: #fff;
			   overflow: auto;
			}
		</STYLE>
		<script type="text/javascript">
	         var cenx = 31.288720;
	         var ceny = 120.665674;
	         var stzoom=15;
	         var map;
	         var directions;
	        function init(){
	            if (GBrowserIsCompatible()){
				    var mapOptions = {
                    googleBarOptions : { style : "new"}
                       }
	                map=new GMap2(document.getElementById("mapholder"));
	                var loc = new GLatLng(cenx,ceny);
	                map.setCenter(loc,stzoom);
					map.addControl(new GLargeMapControl());
					
					//GHierarchicalMapTypeControl 通常需要一些初始化才能以正确的顺序显示联级"菜单"中的地图类型。
					var mapControl = new GHierarchicalMapTypeControl();
        
        		   //设置地图类型菜单关系
        		    mapControl.clearRelationships();
        		    mapControl.addRelationship(G_SATELLITE_MAP, G_HYBRID_MAP, "Labels", false);
					map.addControl(mapControl);  
					//map.addControl(new GMapTypeControl());//词句添加的地图模型为一般的地图和卫星地图				
					directions = new GDirections(map); 
					
					 //添加地图缩略图
		            var oerviewMapControl = new GOverviewMapControl();
		            map.addControl(oerviewMapControl);
	
					//draggable 表示该标记是否可以移动，true为可以 false为否
					var marker = new GMarker(loc, {
						draggable:true
					});
					GEvent.addListener(marker, "dragstart", function(){
						map.closeInfoWindow();
					});
					GEvent.addListener(marker, "dragend", function(){
						marker.openInfoWindowHtml("Just bouncing along...");
					});
					map.addOverlay(marker);
					map.openInfoWindow(map.getCenter(),document.createTextNode("ZhiHuiGuan:Tong Yuan Road Information Building Two Floor"));
					map.enableGoogleBar();
	            }
	        }    
			function getdirections() {
			   var fmaddr = document.getElementById("fromaddress").value;
			   var toaddr = document.getElementById("toaddress").value;
			   var avoid = document.getElementById("avoidHighways").value;
			
			   if (!directions) {
			      directions = new GDirections(map);
			   }
			   GEvent.addListener(directions, "addoverlay", function() {
			      var route = directions.getRoute(0);
			      var bounds = new GLatLngBounds();
			      var disp = "";
			      disp = disp + "<h4>Directions</h4>"+directions.getDistance().html+" about "+directions.getDuration().html+"<br /><hr size='1' noshade='noshade' />";
			      disp = disp + "<table>";
			      for(i=0;i< route.getNumSteps();i++) {
			         var stp = route.getStep(i);
			         bounds.extend(stp.getLatLng());
			 
			         var clr = (i%2)?"#ccc":"#eee";
			         disp = disp + "<tr valign='top'><td style='background:"+clr+";'>" + stp.getDescriptionHtml() + "</td>";
			         disp = disp + "<td style='background:"+clr+";'>" + stp.getDistance().html+"</td></tr>";
			      }
			       disp = disp + "</table>";
			       document.getElementById('dirholder').innerHTML = disp;
			       map.setZoom(map.getBoundsZoomLevel(bounds));
			       map.setCenter(loc,stzoom);
			   });
			      GEvent.addListener(directions, "error", function(){
			      alert("no find way!");
			   });
			 	  if (avoid == 1) {
			   	directions.load("from: " + fmaddr + " to: " + toaddr, {
			   		getSteps: true,
			   		avoidHighways: true});
			   }else{
			   	directions.load("from: " + fmaddr + " to: " + toaddr, {
			   		getSteps: true,
			   		avoidHighways: false});
			   }
						}
	        window.οnlοad=init;
	        window.οnunlοad=GUnload;
    </script>


	</head>
	<body>
		<div id="frmholder">
			<br />
			<form οnsubmit="getdirections();return false;">
				<h4>This Driving travelMode:</h4>
			<br/>
				From Address:
				<input size="10" id="fromaddress" value=" " />
				To Address:
				<input size="10" id="toaddress" value=" " />
	     <th>AvoidHighways</th>
         <td> <select id="avoidHighways" name="avoidHighways">
                      <option value="1">yes</option>
                      <option value="2">no</option>
               </select>
				<input type="submit" value="get road" />
			</form>
			
		</div>
		<div id="mapholder"></div>
		<div id="dirholder"></div>


	</body>
</html>