Google 本地搜索实例

pixy

浏览: 36103 次
性别:
来自: 深圳

最近访客更多访客>>

1021571516

EdgarLi

zozodance

leexiaobin1993

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

GoogleMap

Google prototype ITeye XHTML HTML

下午把以前的代码翻出来整理,发现有好多好东西都丢失了

~~~
下面是一个用于搜索某个位置附近的信息的例子,效果图如下

当时主要是为了得到某地附近的银行的经纬度信息,参考网上的例子写的.
代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
    <title>Google 本地搜索</title> 
    <link href="http://www.google.com/uds/css/gsearch.css" type="text/css" rel="stylesheet"/> 
    <style type="text/css"> 
      body *, table *,
      body {font-family: Arial,Sans-serif;font-size: 13px;} 
      h1 {
        font-size : 16px;
        font-weight : bold;
        background-color : rgb(230, 248, 221);
        border-top : 1px solid rgb(128, 198, 90);
        text-align : center;
        margin-bottom : 10px;
        padding-bottom : 4px;
        color : #676767;
      } 
      h1 .tagline,
      h1 a .tagline {
        font-size : 13px;
        font-weight : normal;
        color : #676767;
        text-decoration : underline;
        cursor : pointer;
      } 
      td {vertical-align : top;} 
      td.map {width: 600px;} 
      td.search-control {
        padding-left : 25px;
        width :  350px;
      } 
      #mapDiv {
        border : 1px solid #979797;
        width : 100%;
        height : 400px;
      } 
      .gsc-keeper {display : none;} 
      .gsc-localResult .gsc-keeper {display : block;} 
    </style> 
   <script src="http://ditu.google.com/maps?file=api&amp;v=2&amp;key=&hl=zh-CN" type="text/javascript"></script>
    <script src="http://www.google.com/uds/api?file=uds.js&amp;v=1.0" type="text/javascript"></script> 
    <script type="text/javascript"> 
    var app;
    function OnLoad(keyword) {
      app = new App(keyword);
    } 
    function App(keyword) { 
      this.myMap = null;
      this.markerList = new Array(); 
      // create a map
      this.myMap = new GMap2(document.getElementByIdx_x("mapDiv"));
      this.myMap.addControl(new GSmallMapControl());
 //设置搜索中心点
       this.myMap.setCenter(new GLatLng(22.50128, 113.914619), 14); 
      // Create a search control
      var searchControl = new GSearchControl(); 
      // Add in a full set of searchers
      var localSearch = new GlocalSearch();
      var options = new GsearcherOptions();
      options.setExpandMode(GSearchControl.EXPAND_MODE_OPEN);
      searchControl.addSearcher(localSearch, options);
      searchControl.addSearcher(new GvideoSearch());
 searchControl.setResultSetSize(google.search.Search.LARGE_RESULTSET);
      // Set the Local Search center point
      localSearch.setCenterPoint(this.myMap); 
      // tell the searcher to draw itself and tell it where to attach
      searchControl.draw(document.getElementByIdx_x("searchcontrol")); 
      // tell the search control to call be on start/stop
      searchControl.setSearchCompleteCallback(this, App.prototype.OnSearchComplete);
      searchControl.setSearchStartingCallback(this, App.prototype.OnSearchStarting);
      searchControl.setOnKeepCallback(this, App.prototype.OnKeep, "view on map"); 
      // execute an inital search
      searchControl.execute(keyword);
    } 
    App.prototype.OnSearchComplete = function(sc, searcher) { 
      // if we have local search results, put them on the map
      if ( searcher.results && searcher.results.length > 0) {
        for (var i = 0; i < searcher.results.length; i++) {
          var result = searcher.results[i];
          // if this is a local search result, then proceed...
          if (result.GsearchResultClass == GlocalSearch.RESULT_CLASS ) {
//打印结果坐标点
printResult(result.titleNoFormatting,result.addressLines[1],result.lat,result.lng);
            var markerObject = new Object();
            markerObject.result = result;
            markerObject.latLng = new GLatLng(parseFloat(result.lat), parseFloat(result.lng));
            markerObject.gmarker = new GMarker(markerObject.latLng);
            var clickHandler = method_closure(this, App.prototype.OnMarkerClick, [markerObject]);
            GEvent.bind(markerObject.gmarker, "click", this, clickHandler);
            this.markerList.push(markerObject);
            this.myMap.addOverlay(markerObject.gmarker);
            result.__markerObject__ = markerObject;
          }
        }
        this.OnMarkerClick(this.markerList[0]);
      }
    } 
    App.prototype.OnSearchStarting = function(sc, searcher, query) {
      // close the info window and clear markers
      this.myMap.closeInfoWindow();
      for (var i=0; i < this.markerList.length; i++) {
        var markerObject = this.markerList[i];
        this.myMap.removeOverlay(markerObject.gmarker);
      }
      this.markerList = new Array();
    } 
    App.prototype.OnKeep = function(result) {
      if (result.__markerObject__) {
        markerObject = result.__markerObject__;
        this.OnMarkerClick(markerObject);
      }
    } 
    App.prototype.OnMarkerClick = function(markerObject) {
      this.myMap.closeInfoWindow();
      var htmlNode = markerObject.result.html.cloneNode(true);
      markerObject.gmarker.openInfoWindow(htmlNode);
    } 
    function method_closure(object, method, opt_argArray) {
      return function() {
        return method.apply(object, opt_argArray);
      }
    } 
//搜索
function search(){
var keyword=document.getElementByIdx_x('keyword').value;
OnLoad(keyword);
}
//打印结果
function printResult(title,address,lat,lng){
var str="*"+title+"  "+address+"  "+lat+","+lng+"<br/>";
document.getElementByIdx_x('resulrdiv').innerHTML+=str;
}
    </script> 
  </head> 
  <body>     
    <table> 
<tr>
      <td class="map"><div id="mapDiv">Loading...</div></td> 
      <td class="search-control"><div id="searchcontrol">Loading...</div></td> 
 <td><div id="resulrdiv">结果坐标点：<br/></div></td>
 </tr>
 <tr><div>
<INPUT TYPE="text" id="keyword" NAME="keyword" size="40" value="银行"/><INPUT TYPE="button" VALUE="搜索" ONCLICK="search();">
</div></tr>
    </table> 
  </body> 
</html>