Simple introduction to using Google (Local) Search API_javascript skills-JS Tutorial-php.cn

Simple introduction to using Google (Local) Search API_javascript skills

WBOY

Release： 2016-05-16 17:12:05

Original

1198 people have browsed it

It took me two days to use Google’s API to make such a small thing. In fact, the actual implementation code is not much, only a dozen lines. The time-consuming work is understanding the functions of each API and debugging JavaScript.

Let me briefly introduce some of the functions I used this time.

•Constructor google.search.LocalSearch()

This actually creates a LocalSearch Service. This Service, like other Services (News, Blog, Web), is used by SearchControl. These Services determine the capabilities of SearchControl.

•Set the search structure type of LocalSearch

localSearch.setRestriction(google.search.Search.RESTRICT_TYPE, google.search.LocalSearch.TYPE_KMLONLY_RESULTS)

This means that there are no business results in the search results, only kml and geocode results

•Set the search scope of LocalSearch

localSearch.setCenterPoint("Beijing");

•google.search.SearcherOptions()

Set the properties of Search Service (Searcher) and use it as an attribute of SearchControl.addSearcher(). The following options are available:

1. Set the display mode of results
•searcherOptions.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN);

2. The text displayed when there are no search results in the profile

• searcherOptions.setNoResultsString(google.search.SearchControl.NO_RESULTS_DEFAULT_STRING);

3. Set the position where the results are 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 mode, that is, each Searcher will be displayed like tabs

•drawOptions.setInput(document.getElementById("input"));

Change the default value of the search input box to a user-defined input box

Return the user-selected search results as a corresponding GResult object. For example, the GResult of LocalSearch is a GLocalResult.

It took me a long time to find this option. There are two reasons. First, there are few people using it and there are few documents. Second, it took me a long time to understand the English document I read. In fact, it takes longer to read the Chinese document, I think.

•searchControl.setOnKeepCallback(this, LocalSearchKeepHandler);

By the way, paste the code of LocalSearchKeepHandler, whose parameter is the automatically returned GResult object.

Copy code The 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);
 }

Just post this code as a whole for easy reading

Copy code The 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("北京"); 
  //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--
     //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);