A brief introduction to the use of the Google of Local Search API
- 2020-03-30 00:02:51
- OfStack
It took two days to build this little thing using Google's API, but there wasn't a lot of actual implementation code, just a dozen lines. The time-consuming work is to understand the capabilities of the various apis and debug JavaScript.
So let's talk a little bit about some of the functions that I'm going to use this time.
The & # 8226; The constructor Google. Search. LocalSearch ()
This is actually creating a Service for LocalSearch that, like any other Service (News, Blog, Web), is used by SearchControl. These services determine the capabilities of the SearchControl.
The & # 8226; Set the type of search structure for LocalSearch
LocalSearch. SetRestriction (Google search. Search. RESTRICT_TYPE, Google, search, localSearch. TYPE_KMLONLY_RESULTS)
This means that the search results have no business results, only KML and geocode results
The & # 8226; Set the search range for LocalSearch
LocalSearch. SetCenterPoint (" Beijing ");
The & # 8226; Google. Search. SearcherOptions ()
Set the Search Service (a Searcher) attributes, as SearchControl. AddSearcher () an attribute is used, have the following options can choose:
1. Set the display mode of the result
The & # 8226; SearcherOptions. SetExpandMode (Google search. SearchControl. EXPAND_MODE_OPEN);
2. Set file without search results when the text is displayed
The & # 8226; SearcherOptions. SetNoResultsString (Google search. SearchControl. NO_RESULTS_DEFAULT_STRING);
3. Set the location where the results will be displayed
The & # 8226; SearcherOptions. SetRoot (resultCanvas);
The & # 8226; The new Google. Search. DrawOptions ();
Set how Google Search Control is displayed
The & # 8226; DrawOptions. SetDrawMode (Google search. SearchControl. DRAW_MODE_TABBED)
Set the display mode to tabbed mode, that is, each Searcher is displayed like tabs
The & # 8226; DrawOptions. SetInput (document. GetElementById (" input "));
Change the default value of the search field to a user-defined field
The search result selected by the user is returned as a corresponding GResult object. For example, GResult of LocalSearch is a GLocalResult.
This option took me a long time to find, for two reasons. Second, I read the English documents, it took me quite a long time to understand, in fact, it took me longer to read the Chinese documents, I think.
The & # 8226; SearchControl. SetOnKeepCallback (this, LocalSearchKeepHandler);
By the way, I'm pailing LocalSearchKeepHandler's code with the GResult object that's automatically returned.
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 post the code as a whole for easy reading
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 many 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);