google api 地图搜索应用

来源：互联网发布：0809赛季的韦德数据编辑：程序博客网时间：2024/05/19 17:26
<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><scriptsrc="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.onload=init;        window.onunload=GUnload;    </script></head><body><div id="frmholder"><br /><form onsubmit="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>
0 0