Lokale Suche und Bereichssuche der Baidu Map API_Javascript-Kenntnisse-js-Tutorial-php.cn

Der Kartendienst bezieht sich auf eine Schnittstelle, die Dateninformationen wie lokale Suche/Routenplanung usw. bereitstellen kann. Der unten stehende Editor sortiert die lokale Suche und Bereichssuche der Baidu Map API. Weitere Informationen finden Sie unten.

Übersicht über den Kartendienst
Unter Kartendiensten versteht man Schnittstellen, die Dateninformationen bereitstellen, wie z. B. lokale Suche, Routenplanung usw. Die von der Baidu Map API bereitgestellten Dienste sind:

LocalSearch: Lokale Suche, Bereitstellung von Standortsuchdiensten in einem bestimmten Bereich, z. B. Suche nach „Park“ in Peking.
TransitRoute: Busnavigation, Bereitstellung von Suchdiensten für Busreisepläne in einem bestimmten Gebiet.
DrivingRoute: Fahrnavigation, Bereitstellung von Suchdiensten für Fahrreisepläne.
WalkingRoute: Navigation zu Fuß, Bereitstellung von Suchdiensten für Reisepläne zu Fuß.
Geocoder: Adressanalyse, Bereitstellung von Diensten zum Konvertieren von Adressinformationen in Koordinatenpunktinformationen.
LocalCity: Lokale Stadt, die einen Dienst zur automatischen Bestimmung der Stadt bereitstellt, in der Sie sich befinden.
TrafficControl: Echtzeit-Verkehrskontrolle, Bereitstellung von Echtzeit- und historischen Verkehrsinformationsdiensten.
Die Serviceschnittstelle der Suchklasse muss einen Suchbereich angeben, andernfalls funktioniert die Schnittstelle nicht.

Lokale Suche
BMap.LocalSearch bietet lokale Suchdienste. Wenn Sie die lokale Suche verwenden, müssen Sie einen Suchbereich dafür festlegen. Der Suchbereich kann ein BMap.Map-Objekt, ein BMap.Point-Objekt oder eine Zeichenfolge mit Provinz- oder Stadtnamen sein : „Peking-Stadt“). Der zweite Parameter des BMap.LocalSearch-Konstruktors ist optional, in dem Sie die Darstellung der Ergebnisse angeben können. Die BMap.RenderOptions-Klasse stellt mehrere Eigenschaften bereit, die das Rendering steuern, wobei „map“ die Karteninstanz angibt, in der die Ergebnisse angezeigt werden, und „panel“ das Containerelement der Ergebnisliste angibt.

Code kopieren Der Code lautet wie folgt:

var map = new BMap.Map("container");  

map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  

var local = new BMap.LocalSearch(map, { 

renderOptions:{map:map} 

});  

local.search("Tiananmen");

Darüber hinaus bietet BMap.LocalSearch auch die Methoden searchNearby und searchInBounds, um Ihnen Umgebungssuch- und Bereichssuchdienste bereitzustellen.

Suche konfigurieren

BMap.LocalSearch bietet mehrere Konfigurationsmethoden, mit denen Sie das Verhalten des Suchdienstes an Ihre Bedürfnisse anpassen können. Im folgenden Beispiel passen wir jede Seite an, um 8 Ergebnisse anzuzeigen, und passen das Sichtfeld der Karte automatisch entsprechend der Position des Ergebnispunkts an, ohne das Informationsfenster des ersten Ergebnisses anzuzeigen:

Code kopieren Der Code lautet wie folgt:

var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);
var local = new BMap.LocalSearch("Beijing", 

                   {renderOptions: {map: map,autoViewport: true},pageCapacity: 8});                        
local.search("Zhongguancun");

Ergebnisbereich

Durch Festlegen der Eigenschaft BMap.LocalSearchOptions.renderOptions.panel können Sie einen Ergebnislistencontainer für das lokale Suchobjekt bereitstellen, und die Suchergebnisse werden automatisch dem Containerelement hinzugefügt. Bitte sehen Sie sich das Beispiel unten an:

Code kopieren Der Code lautet wie folgt: var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); var local = new BMap.LocalSearch(map,

{renderOptions: {map: map,panel: "results"}); local.search("Zhongguancun");

Datenschnittstelle

Neben der automatischen Hinzufügung von Suchergebnissen zu Karten und Listen können Sie über die Datenschnittstelle auch detaillierte Dateninformationen abrufen. In Kombination mit der Karten-API können Sie der Karte selbst Beschriftungen und Informationsfenster hinzufügen. Die Klassen BMap.LocalSearch und BMap.LocalSearchOptions stellen mehrere Schnittstellen zum Festlegen von Rückruffunktionen bereit, über die die Dateninformationen der Suchergebnisse abgerufen werden können. Beispielsweise kann die Objektinstanz BMap.LocalResult über den Rückruffunktionsparameter onSearchComplete abgerufen werden, der die Dateninformationen jedes Suchergebnisses enthält. Wenn die Rückruffunktion ausgeführt wird, können Sie die Methode BMap.LocalSearch.getStatus() verwenden, um zu bestätigen, ob die Suche erfolgreich war, oder um Fehlerdetails abzurufen.

Im folgenden Beispiel werden die Titel- und Adressinformationen jedes Ergebnisses auf der ersten Seite über die Rückruffunktion onSearchComplete abgerufen und auf der Seite ausgegeben:

Code kopieren Der Code lautet wie folgt:

var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  

var-Optionen = { 

          onSearchComplete: function(results){                        
               if (local.getStatus() == BMAP_STATUS_SUCCESS){                                      
                                                                                                                                                                                                                                             // Bestimmen Sie, ob der Status korrekt ist
                    var s = [];                                
for (var i = 0; i < results.getCurrentNumPois(); i ){ 

                       s.push(results.getPoi(i).title ", " " results.getPoi(i).address);                                      
                                                                       
document.getElementById("log").innerHTML = s.join("
");
                                                                  
};   

var local = new BMap.LocalSearch(map, options);  

local.search("park");

Suche in der Nähe

 Mit dem Suchdienst in der Nähe können Sie in der Nähe eines bestimmten Standorts oder in der Nähe eines bestimmten Ergebnispunkts suchen. 

 Das folgende Beispiel zeigt, wie Sie in der Nähe der Haustür nach Snacks suchen:

Code kopieren

Der Code lautet wie folgt:

var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

var local = new BMap.LocalSearch(map, { renderOptions:{map: map, autoViewport: true}}); local.searchNearby("snack", "front door");

Rechteckbereichssuche

 Die Suche nach rechteckigem Bereich liefert Suchergebnisse basierend auf dem von Ihnen bereitgestellten Sichtfeld. Hinweis: Wenn der Suchbereich zu groß ist, werden möglicherweise keine Ergebnisse angezeigt. 

 Das folgende Beispiel zeigt, wie im aktuellen Sichtfeld der Karte nach Banken gesucht wird:

Code kopieren

Der Code lautet wie folgt:

var map = new BMap.Map("container");

map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);

var local = new BMap.LocalSearch(map,

{ renderOptions:{map:map}}); local.searchInBounds("Bank", map.getBounds()); Beispiel für die Suche nach einem rechteckigen Bereich

Rendering: