Google の API を使用してこのような小さなものを作成するのに 2 日かかりましたが、実際の実装コードはわずか数行でした。時間のかかる作業は、各 API の機能の理解と JavaScript のデバッグです。
今回使用した機能を簡単に紹介します。
•コンストラクター google.search.LocalSearch()
これにより、実際には LocalSearch サービスが作成されます。このサービスは、他のサービス (ニュース、ブログ、Web) と同様に、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 です。
このオプションを見つけるのに長い時間がかかりました。理由は 2 つあります。1 つは、このオプションを使用している人が少なく、ドキュメントが少ないことです。次に、英語の文書を読むのに時間がかかりました。実際、中国語の文書を読むともっと時間がかかると思います。
•searchControl.setOnKeepCallback(this, LocalSearchKeepHandler);
ちなみに、自動的に返される GResult オブジェクトをパラメータとする LocalSearchKeepHandler のコードを貼り付けます。
次のようにコードをコピーします。
関数 LocalSearchKeepHandler(結果) {
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("検索", "1", {"言語": "zh-CN"});
関数初期化() {
// マップのローカル検索サービスを作成するために使用される LocalSearch オブジェクト
var localSearch = 新しい 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 = 新しい 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 = 新しい 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());
// オプションを描画し、タブ付きビューに設定します。
vardrawOptions = 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);//ここで、fromaddress と toaddress を検索、新しい場所に変更しました。
//別のユーザー定義入力ボックス
drawOptions.setInput(document.getElementById("input2"));
searchControl.draw();
/** 以下のコードは Google Ajax Map Search API に関するものです
//このコードセグメントは、検索結果を表示するサイドバーを追加するために使用されます
//なぜここに 'var' が存在しないのだろうか
optinos = 新しいオブジェクト();
options.resultList = resultCanvas;
options.resultFormat = "複数行 1";
var lsc2 = 新しい google.elements.LocalSearch(オプション);
map.addControl(lsc2, new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(-282, -2)));
*/
}
google.setOnLoadCallback(初期化);