Il m'a fallu deux jours pour utiliser l'API de Google pour créer une si petite chose. En fait, le code d'implémentation réel n'est pas très important, seulement une douzaine de lignes. Le travail fastidieux consiste à comprendre les fonctions de chaque API et à déboguer JavaScript.
Présentons brièvement certaines des fonctions que j'ai utilisées cette fois.
•Constructeur google.search.LocalSearch()
Cela crée en fait un service LocalSearch. Ce service, comme d'autres services (Actualités, Blog, Web), est utilisé par SearchControl. Ces services déterminent les capacités de SearchControl.
• Définir le type de structure de recherche de LocalSearch
localSearch.setRestriction(google.search.Search.RESTRICT_TYPE, google.search.LocalSearch.TYPE_KMLONLY_RESULTS)
Cela montre qu'il n'y a aucun résultat commercial dans les résultats de recherche, uniquement des résultats kml et géocodés.
• Définir la portée de recherche de LocalSearch
localSearch.setCenterPoint("Pékin");
•google.search.SearcherOptions()
Définissez les propriétés du service de recherche (Searcher) et utilisez-les comme attribut de SearchControl.addSearcher(). Les options suivantes sont disponibles :
1. Définir la méthode d'affichage des résultats
•searcherOptions.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN) ;
2. Le texte affiché lorsqu'il n'y a aucun résultat de recherche dans le profil
• searcherOptions.setNoResultsString(google.search.SearchControl.NO_RESULTS_DEFAULT_STRING) ;
3. Définissez l'emplacement où les résultats sont affichés
•searcherOptions.setRoot(resultCanvas);
•nouveau google.search.DrawOptions();
Définir la manière dont Google Search Control est affiché
•drawOptions.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED)
Définissez le mode d'affichage en mode onglets, c'est-à-dire que chaque chercheur est affiché comme des onglets
•drawOptions.setInput(document.getElementById("input"));
Changez la valeur par défaut de la zone de saisie de recherche en une zone de saisie définie par l'utilisateur
Renvoie les résultats de recherche sélectionnés par l'utilisateur en tant qu'objet GResult correspondant. Par exemple, le GResult de LocalSearch est un GLocalResult.
Il m'a fallu beaucoup de temps pour trouver cette option. Il y a deux raisons. Premièrement, peu de gens l'utilisent et il y a peu de documents. Deuxièmement, il m'a fallu beaucoup de temps pour comprendre le document anglais que j'ai lu. En fait, il me faut plus de temps pour lire le document chinois, je pense.
•searchControl.setOnKeepCallback(ceci, LocalSearchKeepHandler) ;
Au fait, collez le code de LocalSearchKeepHandler, dont le paramètre est l'objet GResult automatiquement renvoyé.
Copiez le code comme suit :
fonction LocalSearchKeepHandler (résultat) {
var from = document.getElementById("from");
alert("result.tilte = " + result.title);
from.value = ProcessString(result.title);
alert("from.value = " + from.value);
//alerte(result.title);
}
Postez simplement ce code dans son intégralité pour une lecture plus facile.
Copiez le code comme suit :
google.load("search", "1", {"langue": "zh-CN"});
fonction initialiser() {
//LocalSearch Objet utilisé pour créer un service de recherche local pour les cartes
var localSearch = new google.search.LocalSearch();
// restreindre les résultats de recherche locale aux résultats kml et géocodés uniquement, pas aux résultats professionnels
localSearch.setRestriction(google.search.Search.RESTRICT_TYPE, google.search.LocalSearch.TYPE_KMLONLY_RESULTS) ;
// Définir le point central de la recherche locale
localSearch.setCenterPoint("Pékin");
//Il s'agit de recherche locale, qui permet de définir où les résultats apparaîtront, un paramètre d'options
var resultCanvas = document.getElementById("resultCanvas");
//options : ouvert, racine alternative
var searcherOptions = new google.search.SearcherOptions();
//afficher de nombreux résultats
searcherOptions.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN);
//aucun message de résultat
searcherOptions.setNoResultsString(google.search.SearchControl.NO_RESULTS_DEFAULT_STRING);
//options.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED);//web, local... dans un onglet affiché
searcherOptions.setRoot(resultCanvas);//afficher les résultats dans un autre endroit--<div id="resultCanvas">
//SearchControl Objet utilisé pour créer un service de recherche qui inclura un service de recherche local
var searchControl = new google.search.SearchControl(null);
searchControl.addSearcher (localSearch, searcherOptions);
searchControl.addSearcher (nouveau google.search.WebSearch());
searchControl.addSearcher (nouveau google.search.NewsSearch());
searchControl.addSearcher (nouveau google.search.BlogSearch());
//dessine les options et définit-le sur une vue à onglets,
var drawOptions = new google.search.DrawOptions();
drawOptions.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED)
// fait en sorte que le searchControl renvoie un résultat : GResult
searchControl.setOnKeepCallback(this, LocalSearchKeepHandler);//conserver un résultat de recherche
//Cette option est utilisée pour définir la position du champ de recherche dans une arborescence DOM.
//drawOptions.setSearchFormRoot(document.getElementById("drawOptions"));
//définit la zone de saisie sur un élément défini par l'utilisateur
//drawOptions.setInput(document.getElementById("input"));
// dit au champ de recherche de se dessiner et lui indique où attacher
//searchControl.draw(document.getElementById("searchBox"), drawOptions);//Ici, j'ai changé d'adresse et d'adresse pour rechercher, un nouvel endroit
//une autre zone de saisie définie par l'utilisateur
drawOptions.setInput(document.getElementById("input2"));
searchControl.draw();
/** Les codes ci-dessous concernent l'API Google Ajax Map Search
//ce segment de code est utilisé pour ajouter une barre latérale pour afficher les résultats de la recherche
//Je me demande pourquoi aucun 'var' n'existe ici
optinos = nouvel objet ();
options.resultList = resultCanvas ;
options.resultFormat = "multi-ligne1" ;
var lsc2 = nouveau google.elements.LocalSearch(options);
map.addControl(lsc2, nouveau GControlPosition(G_ANCHOR_TOP_LEFT, nouveau GSize(-282, -2)));
*/
}
google.setOnLoadCallback(initialize);