求助：谁有jsp+google map api的设计啊

我是一个大四的学生，我毕业设计的题目是利用google api 做一个自驾车导航系统： 
用户能注册和登录，进去显示当地的地图（不用太大的范围，一个城镇的地图即可），可以在文本框里输入起始地点，查询路线，能查询最短路径之类的。 
还有个管理员能对该系统进行管理。 要求就这样的，但是我们平时没接触过这个东西，网上查了资料也借了书看，还是很不明白，而且用jsp做的是一个也没有找到。过了年也该找工作了，没那么多时间做这个，所以很担心明年毕业答辩还没做出来。谁做过这样的设计啊？？？帮帮忙，说明越详细越好，我目前拿这个题目根本下不了手。 
大家帮帮忙!~找个东西我参考参考，类似的也可以，多多益善啊！~~~

解决方案 »

  1.   

    哪你要好好啃啃google map api了
      

  2.   

    <html>
     <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
      <title>Google Map</title>
      <script type="text/javascript" src="http://ditu.google.cn/maps?file=api&amp;v=2.x&amp;key=ABQIAAAAira30FR5tVprWCJ-8_WcqxSrc1zAT9YCtP2kOyoD7kBAJfliJBROJEdu9hUE13rp9a4OHneyOoW5gg" />
      <script type="text/javascript" src="http://www.ip-look-up.com/Services/ipInfo.js"></script> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/routeboxer/src/RouteBoxer.js" type="text/javascript"></script>
      <script type="text/javascript">
      
       var map;//地图
       var placesResponse;//地址
       var originalWordvalue;//原文本框内容
       var onclickListener;
       //initMap()函数，将地图程序加入到页面
       function initMap(){
        //GBroswerIsCompatible()确定Api能否兼容当前浏览器
        if(GBrowserIsCompatible()){
         //在ID为“Gmap”的层内显示地图
         map = new GMap2(document.getElementById("Gmap"));
         //定位到 范围内
         var geocoder = new GClientGeocoder();
         geocoder.getLocations("南京", function(response) {
          place = response.Place[0];
          point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
          map.setCenter(point, 10);
      
         });
         //加载大“鱼骨”，包含方向按钮和缩放级别控制滑块
         map.addControl(new GLargeMapControl());
         //加载地图类型按钮
         map.addControl(new GMapTypeControl());
         //加载小地图
         map.addControl(new GOverviewMapControl());
         //加载比例尺
         map.addControl(new GScaleControl());
         //允许鼠标双击放大(左键)和缩小(右键)
         map.enableDoubleClickZoom();
         //允许鼠标滚轮放大和缩小
                        map.enableScrollWheelZoom();
        } else {
         alert("浏览器不兼容，地图无法显示");
        }
       }
       //点击搜索按钮
       function searchButton(){
        if(GBrowserIsCompatible()){
         //将图上拾取的监听事件取消
         if(onclickListener != null){
            map.clearOverlays();
          GEvent.removeListener(onclickListener);
          onclickListener = null;
         }
         //执行搜索功能
         var address = document.getElementById("q_addr").value;
         if(address.trim() == ""){
         
          placesList.innerHTML = "";
         } else {
          try {
           var geocoder = new GClientGeocoder();
           geocoder.getLocations(address, function(response) {
            if(response.Place == null || response.Place.length < 1){
             return ;
            }
            place = response.Place[0];
            point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
            map.setCenter(point, 10);
            //清空之前的图层，并显示查询结果中的第一条
            map.clearOverlays();
            er = new GMarker(point);
            er.bindInfoWindowHtml(getGeocodeHtml(response, 0));
            map.addOverlay(er);
            er.openInfoWindowHtml(getGeocodeHtml(response, 0));
            //将地址放到列表中去
            placesResponse = response;
            var placesList = document.getElementById("placesList");
            placesList.innerHTML = "";
            for(var i = 0; i < placesResponse.Place.length; i++){
             var div = document.createElement("div");
             if(i == 0){
              div.style.backgroundColor = "#ECE9D8";
             }
             div.id = i;
             div.style.fontSize = 15;
             div.innerHTML = (i + 1) + ",<br />" + getGeocodeHtml(response, i) + "<br /><br />";
             div.onclick = function(){
              if(placesResponse == null || placesResponse.Place.length < 1){
               return ;
              }
              for(var i = 0; i < placesResponse.Place.length; i++){
               var tempDiv = document.getElementById(i);
               tempDiv.style.backgroundColor = "";
              }
              this.style.backgroundColor = "#ECE9D8";
              place = placesResponse.Place[this.id];
              point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
              map.clearOverlays();
              er = new GMarker(point);
              er.bindInfoWindowHtml(getGeocodeHtml(placesResponse, this.id));
              map.addOverlay(er);
              er.openInfoWindowHtml(getGeocodeHtml(placesResponse, this.id));
             };
             placesList.appendChild(div);
            }
           });
          } catch (err) {
           ;
          }
         }
        } else {
         alert("浏览器不兼容，地图无法显示");
        }
       }
       //清空字符串左右的空格
       String.prototype.trim = function(){
        var reExtraSpace = /^\s*(.*?)\s+$/;
        return this.replace(reExtraSpace, "$1");
       }
       //组装冒泡内的HTML数据
       function getGeocodeHtml(response, i){
        pname = response.name;
        paddress = response.Place[i].address;
        plat = response.Place[i].Point.coordinates[1];
        plon = response.Place[i].Point.coordinates[0];
        return("地点："+pname+"<br />位置："+paddress+"<br />坐标："+plat+","+plon);
       }
       //自动补全
       function checkword(onblur){
        var wordvalue = document.getElementById("q_addr").value.toLowerCase();
        var geocoder = new GClientGeocoder();
        if((wordvalue.trim().length < 1 || wordvalue == originalWordvalue) && onblur){
         document.getElementById("showmenu").style.display = "none";
         return ;
        }
        originalWordvalue = wordvalue;
           try {
         geocoder.getLocations(wordvalue, function(response) {
           if(response.Place == null || response.Place.length < 1) {
            return;
           }
           var alltxt = "";
           for(var i = 0; i < response.Place.length; i++) {
            alltxt = alltxt.concat(response.Place[i].address + "|");
           }
           alltxt = alltxt.substring(0, alltxt.length - 1);
           if(alltxt == ""){
            return ;
           }
           var showmenu = document.getElementById("showmenu");
           var q_addr = document.getElementById("q_addr");
           var position = getControlAbsolutePosition(q_addr);
           //设置显示位置
           showmenu.style.height = response.Place.length * 18;
           showmenu.style.left   = position.left - 1;
           showmenu.style.top    = position.top + 19;
           //加载数据到showmenu中去
           var alltxtpp = alltxt.toLowerCase();
           var alltxt_xiang = alltxt.split("|");
           var alltxt_xiang1 = alltxtpp.split("|");
           var inhtml = "<ul style=\"margin: 0; padding: 0;width:100%;\">"
           for (i = 0; i < alltxt_xiang1.length; i++) {
            if(alltxt_xiang1[i].indexOf(wordvalue) != -1){
             inhtml = inhtml + "<div onmouseover=\"document.getElementById('q_addr').value=this.innerHTML;this.style.backgroundColor='#666666';this.style.color='#ffffff';\" onmouseout=\"this.style.backgroundColor='';this.style.color='';\">" + alltxt_xiang[i] + "</div>";
            }
           }
           inhtml = inhtml + "</ul>";
           showmenu.innerHTML = inhtml;
           showmenu.style.display = "";
            }
           );
        } catch (err) {
         ;
        }
       }
       function AbsolutePosition(top, left){
        this.top = top;
        this.left = left;
       }
       //获取控件在页面中的绝对位置
       function getControlAbsolutePosition(e) {
           t = e.offsetTop;
           l = e.offsetLeft;
           while(e = e.offsetParent)
           {
               t += e.offsetTop;
               l += e.offsetLeft;
           }
           return new AbsolutePosition(t, l);
       }   function onSearchTxtblur(){
        document.getElementById('showmenu').style.display='none';
       }
      </script>
     </head>
     <body onload="initMap()" onunload="GUnload()" style="font-size:14px">
       <table width="545px" height="400px" border="1">
        <tr>
       <td colspan=2>
        <!-- 地址搜索框 -->
        <input type="text" style="width:450px" id="q_addr" align="left" valign="top" onkeyup="checkword(1)" style="border:1px solid #666666;width:120px;height:25px;" onblur="onSearchTxtblur()" onfocus="checkword(0)"/>
        <input type="button" name="search" value=" 搜  索 " onclick="searchButton()" />
        <div style=" width: 520px; z-index: 1; border:1px solid #666666;display:none;" id="showmenu" />
       </td>
        </tr>
        <tr>
       <td width="530px" height="400px">
        <!-- 定义显示地图的层 -->
        <div id="Gmap" style="width:100%;height:100%"></div>
       </td>
        </tr>
      </table>
     </body>
    </html>