带分页功能的周边晚点搜索

最新推荐文章于 2022-08-26 20:07:19 发布

dz45693

最新推荐文章于 2022-08-26 20:07:19 发布

阅读量5.1k

点赞数

分类专栏：地图文章标签： search javascript function styles stylesheet float

本文链接：https://blog.csdn.net/ma_jiang/article/details/6078149

版权

地图专栏收录该内容

8 篇文章 0 订阅

订阅专栏

最近在看Goole 地图，现在贴一个例子。

代码：

<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <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">
    @import url("http://www.google.com/uds/css/gsearch.css");
    @import url("http://www.google.com/uds/solutions/localsearch/gmlocalsearch.css");
   #top ul li{
   float:left;
   padding:3px 8px;

   }
   #top {
   width:100%;
   border-bottom:1px #666 solid;
   clear:both;
   height:20px;
   }
        #addHotelMap {
          border : 1px solid #979797;
          width :79%;
          height : 500px;
          float:left;
        }
         #searchResult {
          border : 1px solid #979797;
          width : 45%;
          height : 570px;
          float:left;
             overflow-y:scroll;
             padding:5px;
        }
     #searchResult div{
          padding:5px 0;
    color:#333;
        }
        ul,li{
    margin:0;
    padding:0;
    list-style:none;
     }
     body{
     color:#999;
     font-size:12px;
     height:98%;
     }
     h1{
   color:#666;
     padding:0;
     margin:0;
     font-size:14px;
     line-height:22px;
     height:22px;
     }
       #schollContainer div.list{
           background:url("scholl.png") no-repeat left;
           padding-left:20px;
       }
  </style>

                if (current_page == 0)
                    request.open("GET", "http://ditu.google.cn/maps?output=kml&hl=zh-CN&q=" + search_value + "&near=" + search_center + "&start=0", true);
                else
                    request.open("GET", "http://ditu.google.cn/maps?output=kml&hl=zh-CN&q=" + search_value + "&near=" + search_center + "&start=" + ((curr) * 10), true);

request.onreadystatechange = function() {
if (request.readyState == 4) {

                        onTypeData(request.responseText);
                    }
                }
                request.send(null);
            }

         }

         window.selectMarker = function(i){
      GEvent.trigger(markers[i], 'click');
      }

window.onTypeData = function(data) {

          var xml = GXml.parse(data);
          var result = "";
          var placemarks = xml.documentElement.getElementsByTagName("Placemark");
          markers = [];
          map.clearOverlays();

          for (var i = 0; i < placemarks.length; i++) {
              var placemark_objs = placemarks[i].childNodes;
              var placemark_styles = placemark_objs[3].childNodes;
              var text = placemark_styles[1].childNodes[1];
              var point = new GLatLng(placemark_objs[4].nodeTypedValue.split(",")[1], placemark_objs[4].nodeTypedValue.split(",")[0]);

              var icon = new GIcon();
              icon.iconSize = new GSize(36, 51);
              //icon.image = "images/schools.png";
              // icon.image = "http://maps.google.com/mapfiles/kml/shapes/schools.png";
              icon.iconAnchor = new GPoint(18, 51);
              icon.infoWindowAnchor = new GPoint(10, 6);

              var marker = new GMarker(point, {
                  icon: icon,
                  title: placemark_objs[0].nodeTypedValue
              });
              marker.point = point;
              marker.text = text;

              map.addOverlay(marker);
              markers.push(marker);

GEvent.addListener(marker, "click", GEvent.callbackArgs(this, openInfoWindow, marker));

              result = result + "<br> " +
              "<a href=/"javascript:selectMarker(" + i + ")/">" +
              "名称:" + placemark_objs[0].nodeTypedValue +
              "; 地址:" + placemark_objs[2].nodeTypedValue +
              "; 坐标:" + placemark_objs[4].nodeTypedValue + "</a>" +
            "<br>";
          }

          result = result + "<a href=/"javascript:Getgeo(-2)/">" + (curr - 1) + "</a> , " +
          "<a href=/"javascript:Getgeo(-1)/">" + curr + "</a> , " +
          "<a href=/"javascript:Getgeo(1)/">" + (curr + 1) + "</a> , " +
          "<a href=/"javascript:Getgeo(2)/">" + (curr + 2) + "</a>";

          document.getElementById('schollContainer').innerHTML = result;
      }

        function openInfoWindow(marker){
           var tabs = [];
           var imgHtml = "<div style='width:400px;font-size:13px;'>" + marker.text.nodeTypedValue + "</div>";
           if (imgHtml.indexOf("$[geDirections]") > 0) {
               imgHtml = imgHtml.substring(0, imgHtml.indexOf("$[geDirections]"))+"</div>"
           }
          imgHtml= imgHtml.replace("$[name]",marker.NA.title)
           var infoHtml = "<div style='width:400px;font-size:13px;'>"+marker.NA.title+"</div>";

           tabs.push(new GInfoWindowTab("信息", infoHtml));
           tabs.push(new GInfoWindowTab("图片", imgHtml));
           marker.openInfoWindowTabsHtml(tabs);
   }

         function init(){
         //检查浏览器的兼容性.
             if (GBrowserIsCompatible()){
             //debugger;
                 map=new GMap2(document.getElementById("map_canvas"));

     //设置地图的中心坐标.
                 var loc = new GLatLng(cenx,ceny);
                 map.setCenter(loc,stzoom);

                 //创建带有可在四个方向平移、放大、缩小的按钮，以及缩放滑块的控件。
     map.addControl(new GLargeMapControl());

     //创建带有切换地图类型的按钮的控件。
     map.addControl(new GMapTypeControl());

             }
         }

         //初始化地图
         window.οnlοad=init;

         //卸载地图
         window.οnunlοad=GUnload;

    </script>

</head>
<body>
  
  搜索内容： <input type="text" name="search_address" id="search_address" />
  搜索中心： <input type="text" name="search_center" id="search_center" />
  <input type="button" value="搜索" οnclick="Getgeo(0)" />
  <div id="searchResult">
                搜索结果：<div id="schollContainer"></div>
        </div>

        <div id="map_canvas" style="width:54%; height:570px ;float:left;"></div>
</body>
</html>
运行结果：