Google(로컬) 검색 API_javascript 기술 사용에 대한 간단한 소개-JS 튜토리얼-php.cn

Google(로컬) 검색 API_javascript 기술 사용에 대한 간단한 소개

WBOY

풀어 주다： 2016-05-16 17:12:05

원래의

1198명이 탐색했습니다.

이렇게 작은 것을 만드는 데 구글 API를 사용하는데 이틀이 걸렸습니다. 사실 실제 구현 코드는 십여 줄에 불과합니다. 시간이 많이 걸리는 작업은 각 API의 기능을 이해하고 JavaScript를 디버깅하는 것입니다.

이번에 사용해본 기능 몇 가지를 간단히 소개하겠습니다.

•생성자 google.search.LocalSearch()

이것은 실제로 LocalSearch 서비스를 생성합니다. 이 서비스는 다른 서비스(뉴스, 블로그, 웹)와 마찬가지로 SearchControl에서 사용됩니다. 이러한 서비스는 SearchControl의 기능을 결정합니다.

•LocalSearch 검색 구조 유형 설정

localSearch.setRestriction(google.search.Search.RESTRICT_TYPE, google.search.LocalSearch.TYPE_KMLONLY_RESULTS)

이는 검색 결과에 비즈니스 결과가 없고 kml 및 지오코드 결과만 있음을 의미합니다

•LocalSearch 검색 범위 설정

localSearch.setCenterPoint("베이징");

•google.search.SearcherOptions()

검색 서비스(Searcher)의 속성을 설정하고 이를 SearchControl.addSearcher()의 속성으로 사용합니다.

1. 결과 표시 모드 설정
•searcherOptions.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN);

2. 프로필에 검색결과가 없을 때 표시되는 텍스트

• searcherOptions.setNoResultsString(google.search.SearchControl.NO_RESULTS_DEFAULT_STRING);

3. 결과가 표시되는 위치를 설정합니다

•searcherOptions.setRoot(resultCanvas);

•새로운 google.search.DrawOptions();

Google 검색 컨트롤의 표시 모드 설정

•drawOptions.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED)

표시 모드를 탭 모드로 설정합니다. 즉, 각 검색자가 탭처럼 표시됩니다

•drawOptions.setInput(document.getElementById("input"));

검색 입력창의 기본값을 사용자 정의 입력창으로 변경

사용자가 선택한 검색 결과를 해당 GResult 개체로 반환합니다. 예를 들어 LocalSearch의 GResult는 GLocalResult입니다.

이 옵션을 찾는 데 시간이 오래 걸렸습니다. 첫째, 사용하는 사람이 적고 문서가 적습니다. 둘째, 내가 읽은 영어 문서를 이해하는 데 시간이 오래 걸렸다. 사실 중국어 문서를 읽는 데는 시간이 더 오래 걸린 것 같다.

•searchControl.setOnKeepCallback(this, LocalSearchKeepHandler);

그런데 매개변수가 자동으로 반환된 GResult 객체인 LocalSearchKeepHandler의 코드를 붙여넣으세요.

코드 복사 코드는 다음과 같습니다.

function LocalSearchKeepHandler(result) {
 var from = document.getElementById("from");
 Alert("result.tilte = " result.title);
 from.value = ProcessString(result.title);
 Alert("from. value = " from.value);
 // Alert(result.title);
 }

읽기 쉽도록 이 코드를 전체적으로 게시하세요

코드 복사 코드는 다음과 같습니다.

google.load("search", "1", {"언어": "zh-CN"});
 function 초기화() {
     //LocalSearch 객체를 생성하는 데 사용됨 지도에 대한 지역 검색 서비스
        var localSearch = new google.search.LocalSearch(); 
        //지역 검색 결과를 kml 및 지오코드 결과로만 제한하고 비즈니스 결과는 제외
        localSearch.setRestriction(google.search.Search.RESTRICT_TYPE, google.search.LocalSearch.TYPE_KMLONLY_RESULTS);             
        // 지역검색 중심점 설정
  localSearch.setCenterPoint("北京"); 
  //결과가 표시될 위치, 옵션 매개변수를 설정하는 데 사용되는 로컬 검색에 관한 것입니다.
  var resultCanvas = document.getElementById("resultCanvas");       
  //옵션: 개방형, 대체 루트
  var searcherOptions = new google.search.SearcherOptions();
  //많은 결과 표시
  searcherOptions.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN); 
  //결과 메시지 없음
  searcherOptions.setNoResultsString(google.search.SearchControl.NO_RESULTS_DEFAULT_STRING);
  //options.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED);//웹, 로컬... 탭에서 
  searcherOptions.setRoot(resultCanvas); //다른 위치에 결과 표시--
     //지역 검색 서비스를 포함할 검색 서비스를 만드는 데 사용되는 SearchControl 개체                 
  var searchControl = new google.search .SearchControl(null);
  searchControl.addSearcher(localSearch, searcherOptions); 
  searchControl.addSearcher(새 google.search.WebSearch());
  searchControl.addSearcher(새 google.search.NewsSearch());
  searchControl.addSearcher(새 google.search.BlogSearch()) ;
  //그리기 옵션을 탭 보기로 설정합니다. 
  var drawOptions = new google.search.DrawOptions();
  drawOptions.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED)
  / /searchControl이 결과를 반환하도록 합니다:GResult
  searchControl.setOnKeepCallback(this, LocalSearchKeepHandler);//검색 결과 유지
  //이 옵션은 DOM 트리에서 검색 상자 위치를 설정하는 데 사용됩니다.
 //drawOptions.setSearchFormRoot(document.getElementById("drawOptions"));
  //입력 상자를 사용자 정의 요소로 설정 
  //drawOptions.setInput(document.getElementById("input"));
  // 검색창에 그림을 그리도록 지시하고 어디에 첨부할지 알려줍니다
 // searchControl.draw(document.getElementById("searchBox"), drawOptions);//여기서 주소와 주소를 검색으로 변경했습니다. 새 장소
  //다른 사용자 정의 입력 상자
  drawOptions.setInput(document.getElementById("input2"));
  searchControl.draw();
  /**아래 코드는 Google Ajax Map Search API에 관한 것입니다
  //이 코드 세그먼트는 검색 결과를 표시하기 위해 사이드바를 추가하는 데 사용됩니다.
  //여기에 'var'가 없는 이유가 궁금합니다
   optinos = new Object();
   options.resultList = resultCanvas;
   options.resultFormat = "multi-line1";
   var lsc2 = new google.elements.LocalSearch(options);
   map.addControl( lsc2, new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(-282, -2)));
   */
        }
 google.setOnLoadCallback(초기화);