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:
- 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.
Function localsearchkeephandler (result) {<br/> var from = document. getelementbyid ("from"); <br/> alert ("result. tilte = "+ result. title); <br/> from. value = processstring (result. title); <br/> alert ("from. value = "+ from. value); <br/> // alert (result. title); <br/>}
Simply paste the entire Code to facilitate reading
Google. load ("Search", "1", {"language": "ZH-CN"}); <br/> function initialize () {<br/> // localsearch object used to create a local search service for the maps <br/> var localsearch = new Google. search. localsearch (); <br/> // restrict the local search resutls to kml and geocode results only, no business ones <br/> localsearch. setrestriction (Google. search. search. restrict_type, Google. search. localsearch. type_kmlonly_results); <br/> // set the local search center point <br/> localsearch. setcenterpoint ("Beijing"); <br/> // It's about local search, which are used to set where the results will appear, A Param of options <br/> var resultcanvas = document. getelementbyid ("resultcanvas"); <br/> // options: open, alternate root <br/> var searcheroptions = new Google. search. searcheroptions (); <br/> // show your results <br/> searcheroptions. setexpandmode (Google. search. searchcontrol. expand_mode_open); <br/> // No results message <br/> searcheroptions. setnoresultsstring (Google. search. searchcontrol. no_results_default_string); <br/> // options. setdrawmode (Google. search. searchcontrol. draw_mode_tabbed); // web, local... in a tab show <br/> searcheroptions. setroot (resultcanvas ); // show the results in another place -- <Div id = "resultcanvas"> <br/> // searchcontrol object used to create a search service which will include a local search service <br /> var searchcontrol = new Google. search. searchcontrol (null); <br/> searchcontrol. addsearcher (localsearch, searcheroptions); <br/> searchcontrol. addsearcher (new Google. search. websearch (); <br/> searchcontrol. addsearcher (new Google. search. newssearch (); <br/> searchcontrol. addsearcher (new Google. search. blogsearch (); <br/> // draw options and set it to a tabbed view, <br/> var drawoptions = new Google. search. drawoptions (); <br/> drawoptions. setdrawmode (Google. search. searchcontrol. draw_mode_tabbed) <br/> // make the searchcontrol return a result: gresult <br/> searchcontrol. setonkeepcallback (this, localsearchkeephandler); // keeping a search result <br/> // This option is used to set the search box position in a DOM tree. <br/> // drawoptions. setsearchformroot (document. getelementbyid ("drawoptions"); <br/> // set the input box to a user defined element <br/> // drawoptions. setinput (document. getelementbyid ("input"); <br/> // tell the search box to draw itself and tell it where to attach <br/> // searchcontrol. draw (document. getelementbyid ("searchbox"), drawoptions); // here I changed fromaddress and toaddress to search, A new place <br/> // another user defined input box <br/> drawoptions. setinput (document. getelementbyid ("input2"); <br/> searchcontrol. draw (); <br/>/** the codes below is about Google Ajax map search API <br/> // This code segment is used to add a sidebar to show the results of the search <br/> // I wonder why no 'var' exists here <br/> optinos = new object (); <br/> options. resultlist = resultcanvas; <br/> options. resultformat = "multi-line1"; <br/> var lsc2 = new Google. elements. localsearch (options); <br/> map. addcontrol (lsc2, new gcontrolposition (g_anchor_top_left, new gsize (-282,-2); <br/> */<br/>}< br/> Google. setonloadcallback (initialize );