It took two days to use Google's API to make such a small thing. In fact, there are not many real implementation codes, just a dozen lines. A time-consuming task is to understand the functions of each API and debug JavaScript.
The following is a brief introduction of several functions I have used this time.
• Constructor google. search. LocalSearch ()
This actually creates a LocalSearch Service, which is the same as other services (News, Blog, Web) and used by SearchControl. These services determine the SearchControl capability.
• Set the search structure type of LocalSearch
LocalSearch. setRestriction (google. search. Search. RESTRICT_TYPE, google. search. LocalSearch. TYPE_KMLONLY_RESULTS)
This indicates that the search results do not have business results, but only kml and geocode results.
• Set the search range of LocalSearch
LocalSearch. setCenterPoint ("Beijing ");
• Google. search. SearcherOptions ()
Set the Search Service (Searcher) attribute as an attribute of SearchControl. addSearcher (). You can select the following options:
1. Set the display mode of the result.
• SearcherOptions. setExpandMode (google. search. SearchControl. EXPAND_MODE_OPEN );
2. Set the text displayed when no search results exist in the file
• SearcherOptions. setNoResultsString (google. search. SearchControl. NO_RESULTS_DEFAULT_STRING );
3. Set the position where the result is displayed.
• SearcherOptions. setRoot (resultCanvas );
• New google. search. DrawOptions ();
Set the display mode of Google Search Control
• DrawOptions. setDrawMode (google. search. SearchControl. DRAW_MODE_TABBED)
Set the display mode to tabbed, that is, each Searcher is displayed as a tabs
• DrawOptions. setInput (document. getElementById ("input "));
Change the default value of the search input box to a custom input box.
Return the search result as a corresponding GResult object. For example, the GResult of LocalSearch is a GLocalResult.
It took me a long time to find this option. Two reasons are as follows: 1. There are fewer users and fewer documents. Second, it took me a long time to understand the English documents I read. In fact, reading Chinese documents takes a longer time. I think.
• SearchControl. setOnKeepCallback (this, LocalSearchKeepHandler );
By the way, the code of LocalSearchKeepHandler is pasted. Its parameter is the automatically returned GResult object.
Copy codeThe Code is as follows:
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 );
}
Simply paste the entire Code to facilitate reading
Copy codeThe Code is as follows:
Google. load ("search", "1", {"language": "zh-CN "});
Function initialize (){
// LocalSearch Object used to create a local search service for the maps
Var localSearch = new google. search. LocalSearch ();
// Restrict the local search resutls to kml and geocode results only, no business ones
LocalSearch. setRestriction (google. search. Search. RESTRICT_TYPE, google. search. LocalSearch. TYPE_KMLONLY_RESULTS );
// Set the Local Search center point
LocalSearch. setCenterPoint ("Beijing ");
// It's about local search, which are used to set where the results will appear, a param of options
Var resultCanvas = document. getElementById ("resultCanvas ");
// Options: open, alternate root
Var searcherOptions = new google. search. SearcherOptions ();
// Show results
SearcherOptions. setExpandMode (google. search. SearchControl. EXPAND_MODE_OPEN );
// No results message
SearcherOptions. setNoResultsString (google. search. SearchControl. NO_RESULTS_DEFAULT_STRING );
// Options. setDrawMode (google. search. SearchControl. DRAW_MODE_TABBED); // web, local... in a tab show
SearcherOptions. setRoot (resultCanvas); // show the results in another place -- <div id = "resultCanvas">
// SearchControl Object used to create a search service which will include a local search service
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 ());
// Draw options and set it to a tabbed view,
Var drawOptions = new google. search. DrawOptions ();
DrawOptions. setDrawMode (google. search. SearchControl. DRAW_MODE_TABBED)
// Make the searchControl return a result: GResult
SearchControl. setOnKeepCallback (this, LocalSearchKeepHandler); // keeping a search result
// This option is used to set the search box position in a DOM tree.
// DrawOptions. setSearchFormRoot (document. getElementById ("drawOptions "));
// Set the input box to a user defined element
// DrawOptions. setInput (document. getElementById ("input "));
// Tell the search box to draw itself and tell it where to attach
// SearchControl. draw (document. getElementById ("searchBox"), drawOptions); // Here I changed fromaddress and toaddress to search, a new place
// Another user defined input box
DrawOptions. setInput (document. getElementById ("input2 "));
SearchControl. draw ();
/** The codes below is about google Ajax Map Search API
// This code segment is used to add a sidebar to show the results of the search
// I wonder why no 'var' exists here
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 (initialize );