Baidu map API: local search and range search _ javascript skills

The map service is an interface that provides data information, such as local search route planning. The following describes the knowledge of Baidu map API in local search and range search, if you have a need, you can learn that the map service is an interface that provides data information, such as local search and route planning, the following is a compilation of local search and range search for Baidu map API. For details, see the following.

Overview
The map service refers to interfaces that provide data information, such as local search and route planning. Baidu map API provides the following services:

LocalSearch: Local search, which provides a location search service for a specific region, such as searching for "Parks" in Beijing ".
TransitRoute: Bus navigation, which provides a search service for bus travel plans in a specific region.
DrivingRoute: Provides a search service for driving travel solutions.
WalkingRoute: Walking navigation, which provides the search service for the walking travel solution.
Geocoder: Address Resolution, which provides the service to convert address information into coordinate point information.
LocalCity: A local city that provides services for automatically determining your city.
TrafficControl: Real-time traffic control, which provides real-time and historical traffic information services.
You must specify a search range for the service interface of the Search Class. Otherwise, the interface will not work.

Local Search
BMap. localSearch provides the local search service. When using local search, you need to set a search area for it. The search area can be BMap. map object, BMap. the string of the Point object or the province or city name (for example, "Beijing. The second parameter of the BMap. LocalSearch constructor is optional. You can specify the rendering of the result. The BMap. RenderOptions class provides several attributes for controlling the rendering. map specifies the map instance to which the result is displayed, and panel specifies the content of the result list.

The Code is as follows:

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 ");

In addition, BMap. LocalSearch provides the searchNearby and searchInBounds methods to provide you with nearby search and range search services.

Configure search

BMap. LocalSearch provides several configuration methods through which you can customize the search service behavior to meet your needs. In the following example, we adjust each page to display 8 results, and automatically adjust the map field of view based on the result position, without displaying the Information Window of the first result:

The Code is as follows:

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 ");

Result panel

By setting the BMap. LocalSearchOptions. renderOptions. panel attribute, you can provide a result list container for the local search object. The search result is automatically added to the container element. See the following example:

The Code is as follows:

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 ");

Data Interface

In addition to automatically adding search results to maps and lists, you can also obtain detailed data information through the data interface. With the map API, you can add annotation and information windows to the map by yourself. The BMap. LocalSearch and BMap. LocalSearchOptions classes provide interfaces for setting callback functions to obtain the data information of search results. For example, the onSearchComplete callback function parameter can be used to obtain the BMap. LocalResult object instance, which contains the data information of each search result. When the callback function is executed, you can use the BMap. LocalSearch. getStatus () method to check whether the search is successful or obtain detailed error information.

In the following example, the onSearchComplete callback function is used to obtain the title and address information of each result on the first page and output it to the page:

The Code is as follows:

Var map = new BMap. Map ("container ");
Map. centerAndZoom (new BMap. Point (116.404, 39.915), 11 );
Var options = {
OnSearchComplete: function (results ){
If (local. getStatus () = BMAP_STATUS_SUCCESS ){
// Determine whether the status is correct
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 ");

Nearby search

By using the nearby search service, you can search near a specific location or around a specific result point.

The following example shows how to search for snacks near the front door:

The Code is as follows:

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 ("snacks", "Qianmen ");

Rectangular range search

Rectangular range search provides search results based on the field of view you provide. Note: When the search range is too large, no results may occur.

The following example shows how to search for a bank within the current map's field of view:

The Code is as follows:

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 ());

Rectangular area search example