Baidu Map API Local search and range search _javascript tips

Map service refers to the interface that can provide data information, such as local search/route planning, and so on, the following small series for everyone to clean up the Baidu Map API local search and range search, specific see below.

Map Services Overview
Map services refer to those interfaces that provide data information, such as local search, route planning, and so on. The services provided by the Baidu Map API are:

localsearch: Local search, providing location search services in a specific area, such as a search for "Parks" in Beijing.
Transitroute: public transit navigation, providing a search service for a bus trip in a specific area.
drivingroute: Driving navigation, providing a search service for a driving trip plan.
walkingroute: Pedestrian navigation, providing a search service for the pedestrian travel scheme.
Geocoder: Address resolution, which provides services to convert address information to coordinate point information.
localcity: A local city that provides automatic judgment of your city's services.
Trafficcontrol: Real-time traffic control, providing real-time and historical traffic information services.
The service interface of the search class needs to specify a search scope, otherwise the interface will not work.

Local Search
Bmap.localsearch provides a local search service that needs to be set up for a retrieval area when using a local search, which can be a Bmap.map object, a Bmap.point object, or a string of provincial or municipal names (for example, "Beijing"). The second parameter of the Bmap.localsearch constructor is optional, where you can specify the rendering of the result. The Bmap.renderoptions class provides a number of properties that control rendering, where the map specifies the mapping instance that the result represents, and the panel specifies the container element for the result list.

Copy Code code 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 Square");

In addition, Bmap.localsearch also contains Searchnearby and Searchinbounds methods to provide you with perimeter search and range search services.

Configure Search

Bmap.localsearch provides several configuration methods that allow you to customize the behavior of your search service to suit your needs. In the following example, we adjust the 8 results per page and automatically adjust the view of the map according to the result point position, without displaying the information window for the first result:

Copy Code code 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");

Results panel

By setting the BMap.LocalSearchOptions.renderOptions.panel property, you can provide a result list container for the local search object, and the search results are automatically added to the container element. Take a look at the following example:

Copy Code code 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 the search results are automatically added to the map and list, you can also obtain detailed data information through the data interface, combined with the map API you can add annotations and Information window to the map. The Bmap.localsearch and Bmap.localsearchoptions classes provide a number of interfaces for setting callback functions that can be used to obtain data about the search results. For example, a Bmap.localresult object instance can be obtained by onsearchcomplete the callback function parameter, which contains the data information for each search result. When the callback function is executed, you can use the BMap.LocalSearch.getStatus () method to confirm whether the search was successful or to get the details of the error.

In the following example, the header and address information for each result of the first page is obtained by the Onsearchcomplete callback function and printed on the page:

Copy Code code 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 if 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 ("<br>");
}
}
};
var local = new Bmap.localsearch (map, options);
Local.search ("Park");

Search around

With the perimeter search service, you can search near a location or around a particular result point.

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

Copy Code code 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 ("Snack", "front door");

Rectangular Range Search

A rectangular range search will provide search results based on the range of vision you provide. Note: There may be no results when the search scope is too large.

The following example shows the search for a bank in the current map view range:

Copy Code code 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

Effect Chart:

The above is the entire content of this article, I hope you like.