`
pixy
  • 浏览: 36369 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

Google 本地搜索 实例

阅读更多
下午把以前的代码翻出来整理,发现有好多好东西都丢失了 ~~~
下面是一个用于搜索某个位置附近的信息的例子,效果图如下


当时主要是为了得到某地附近的银行的经纬度信息,参考网上的例子写的.
代码如下:
<!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> 
  • 大小: 35.9 KB
分享到:
评论

相关推荐

    google map应用实例

    本应用实例将探讨如何利用Google Map API在离线环境中实现地图服务,这对于那些网络不稳定或者需要在无网络环境下使用的场景尤其有价值。 一、Google Map API简介 Google Map API是Google提供的一套接口,允许...

    搜索引擎 谷歌 百度 实例

    本文主要探讨搜索引擎,特别是谷歌和百度这两个全球领先的搜索平台,并通过实例解析它们的工作原理和技术细节。 首先,我们要理解搜索引擎的基本工作流程,这通常包括爬取、索引、排名和检索四个步骤。搜索引擎会...

    Google Map API 开发实例

    通过学习这些实例,你可以逐步掌握如何利用Google Map API创建交互式地图应用,解决实际问题,比如建立一个本地商家搜索系统,或者构建一个导航应用。 总之,Google Map API的开发实例是一个深入学习和实践的绝佳...

    仿google搜索提示

    总之,“仿Google搜索提示”项目是一个前端开发实例,涉及的主要技术包括HTML、CSS和JavaScript,可能还会涉及到后端技术和数据库交互。通过研究这个项目,开发者可以学习到如何创建实时交互的网页元素,提升网站的...

    搜索自动提示列表的dwr实现实例

    "GoogleSuggest"可能是这个实例中使用的具体示例,它可能模拟了Google搜索引擎的自动提示功能。在实践中,你可能需要一个包含常见搜索词的数据库或者API来获取搜索建议。用户输入时,前端会通过DWR调用后台的`...

    百度,高德,谷歌定位应用实例

    本实例聚焦于三大主流地图服务商——百度、高德和谷歌的定位接口应用,为开发者提供了一种集成多平台定位功能的方法。这些服务商提供的定位API能够帮助开发者获取用户的实时地理位置信息,从而实现各种基于位置的...

    Android AS开发的音乐播放器 有音乐播放页面 本地音乐 和网络搜索

    本项目是一个基于Android Studio(AS)的音乐播放器,提供了音乐播放页面,支持本地音乐播放和网络音乐搜索功能。下面我们将深入探讨这个项目中的关键知识点。 1. **Android Studio开发环境**:Android Studio是...

    PHP实例开发源码—Google搜索爬虫完美解密开源版.zip

    这个"PHP实例开发源码—Google搜索爬虫完美解密开源版.zip"压缩包文件提供了一个具体的PHP项目实例,即一个Google搜索爬虫的源代码。通过分析这个项目,我们可以深入了解PHP在网络爬虫开发中的应用,以及相关的编程...

    Eclipse编写的Android自动文本输入应用实例(仿搜索引擎的搜索输入)

    这个实例将展示如何创建一个动态的、用户友好的搜索界面,当用户在输入框中键入文字时,应用能够自动提供相关的建议或搜索结果。 首先,我们需要了解Eclipse V4.2.0。这是一款历史悠久的集成开发环境(IDE),特别...

    搜索引擎的概念、分类和实例.pptx

    本讲座主要探讨了搜索引擎的概念、分类以及一些常见的实例。 首先,搜索引擎的定义是:它是一种运用特定的计算机程序,遵循一定的策略从互联网上抓取信息,然后对这些信息进行组织和处理。一旦用户发起查询,搜索...

    Google Map开发房产地图实例

    ### Google Map开发房产地图实例详解 #### 一、概述 本文档主要介绍如何利用Google Maps JavaScript API V3 和 Google Local Search API 来开发一个房产地图应用。通过详细步骤的讲解和示例代码的展示,帮助读者...

    Android经典编程实例_地图搜索-美食天下_源文件.zip

    在Android平台上进行应用开发时,地图搜索功能是一个常见的需求,特别是在构建本地生活服务类应用时,如"美食天下"这样的应用。本实例将探讨如何在Android应用中集成地图功能,实现用户可以搜索并找到附近的美食餐厅...

    Android开发实例大全.pdf

    5. **文件搜索程序**:如何在应用内实现文件搜索功能。 6. **动态菜单列表、加载手机磁盘文件**:实现具有动态功能的菜单及文件操作。 7. **抽屉样式效果**:模拟实现类似Google Play商店的抽屉式菜单。 8. **多种...

    访google首页导航菜单

    5. **地理位置服务**:如果开启,会在搜索框下方显示当前位置,便于进行本地搜索。 6. **新闻、图片、视频等垂直搜索**:在搜索框下方,Google通常会提供快速链接,让用户直接进入特定类型的搜索结果,如新闻、图片...

    C++经典实例代码(游戏和管理系统)

    实例可能涵盖链表、数组、树、图等基本数据结构,以及排序、搜索、图遍历等算法的实现。学习这些实例有助于提升解决问题的能力。 4. **系统管理**: 这部分的代码可能涉及到进程管理、线程同步、文件操作、网络...

    android的开发实例

    通过这个实例,开发者将了解如何加载本地或远程的HTML页面,并实现网页与原生应用的交互。 4. **HelloAutoComplete**: 自动完成文本框(AutoCompleteTextView)提供了一个搜索建议的功能。开发者可以通过这个实例...

    WinForm使用CefSharp内嵌chrome浏览器实例

    在Visual Studio中,打开项目管理器,找到“管理NuGet程序包”,搜索"CefSharp.WinForms"并安装最新版本。 2. **配置CEF**: 安装CefSharp后,需要下载CEF的运行时文件。这些文件通常包括`cef_binary_x.x.x.x_...

    图书Google Maps API开发大全的各章源码

    6. **本地搜索**:通过Google Maps API的本地搜索服务,开发者可以集成地图上的地点搜索功能,帮助用户快速找到附近的餐馆、咖啡厅、酒店等。 7. **网点管理系统**:利用API,开发者可以构建一个系统来管理各种实体...

    Android 学习实例整合

    此外,本地词库的存储和搜索也是需要考虑的部分。 8. **录音**:录音功能涉及到`MediaRecorder`类,它负责录制音频。开发者需要知道如何设置录音参数,开始、暂停和停止录音,并将录制的音频保存到文件。 9. **...

Global site tag (gtag.js) - Google Analytics