이렇게 작은 것을 만드는 데 구글의 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의 코드를 붙여넣으세요.
다음과 같이 코드 코드를 복사합니다.
함수 LocalSearchKeepHandler(결과) {
var from = document.getElementById("from");
Alert("result.tilte = " + 결과.제목);
from.value = ProcessString(result.title);
Alert("from.value = " + from.value);
//경고(결과.제목);
}
쉽게 읽을 수 있도록 이 코드 전체를 게시하세요.
다음과 같이 코드 코드를 복사합니다.
google.load("search", "1", {"언어": "zh-CN"});
함수 초기화() {
//지도에 대한 지역 검색 서비스를 만드는 데 사용되는 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);//다른 위치에 결과 표시--<div id="resultCanvas">
//지역 검색 서비스를 포함할 검색 서비스를 생성하는 데 사용되는 SearchControl 개체
var searchControl = new google.search.SearchControl(null);
searchControl.addSearcher(localSearch, searcherOptions);
searchControl.addSearcher(new google.search.WebSearch());
searchControl.addSearcher(new google.search.NewsSearch());
searchControl.addSearcher(new 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("입력"));
// 검색창에 스스로 그리도록 지시하고 부착할 위치를 알려줍니다.
//searchControl.draw(document.getElementById("searchBox"), drawOptions);//여기서 fromaddress와 toaddress를 검색으로 변경했습니다. 새로운 장소입니다.
//다른 사용자 정의 입력 상자
drawOptions.setInput(document.getElementById("input2"));
searchControl.draw();
/** 아래 코드는 Google Ajax Map Search API에 관한 것입니다.
//이 코드 세그먼트는 검색 결과를 표시하기 위해 사이드바를 추가하는 데 사용됩니다.
//여기에는 왜 'var'가 없는지 궁금합니다.
optinos = 새로운 객체();
options.resultList = 결과캔버스;
options.resultFormat = "multi-line1";
var lsc2 = new google.elements.LocalSearch(옵션);
map.addControl(lsc2, new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(-282, -2)));
*/
}
google.setOnLoadCallback(초기화);