Serve

Map Service Overview

Map services refer to interfaces that provide data information, such as local search, route planning, etc. The services provided by Baidu Map API are:

LocalSearch: local search, providing location search services in a specific area, such as searching for "park" in Beijing.

TransitRoute: Bus navigation, providing search services for bus travel plans in a specific area.

DrivingRoute: Driving navigation, providing search services for driving travel plans.

WalkingRoute: Walking navigation, providing search services for walking travel plans.

Geocoder: Address resolution, providing services for converting address information into coordinate point information.

LocalCity: Local city, providing a service that automatically determines your city.

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 range, otherwise the interface will not work.

Local Search

BMap.LocalSearch provides local search services. When using local search, you need to set a retrieval area for it. The retrieval area can be a BMap.Map object, BMap.Point object or a string of province and city names (for example: "Beijing"). The second parameter of the BMap.LocalSearch constructor is optional, where you can specify the rendering of the results. The BMap.RenderOptions class provides several properties that control rendering, where map specifies the map instance where the results are displayed, and panel specifies the container element of the result list.

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("天安门");

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

Configuring Search

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

var map = new BMap.Map("container");    
map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);  
var local = new BMap.LocalSearch("北京市",   
            {renderOptions: {map: map,autoViewport: true},pageCapacity: 8});      
local.search("中关村");

Result 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 will be automatically added to the container element. Please see the following example:

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("中关村");

Data interface

In addition to the search results 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 it to the map yourself. Annotation and information windows. The BMap.LocalSearch and BMap.LocalSearchOptions classes provide several interfaces for setting callback functions, through which the data information of the search results can be obtained. For example, the BMap.LocalResult object instance can be obtained through the onSearchComplete callback function parameter, which contains the data information of 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 error details.

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

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){      
                // 判断状态是否正确      
                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("公园");

Nearby search

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

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

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("小吃", "前门");

Rectangular range search

A rectangular range search will provide search results based on the field of view you provide. Note: When the search scope is too large, there may be no results.

The following example shows searching for banks within the current map field of view:

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("银行", map.getBounds());

Bus Navigation

var map = new BMap.Map("container");    
map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);    
var transit = new BMap.TransitRoute(map, {    
 renderOptions: {map: map}    
});    
transit.search("王府井", "西单");

var map = new BMap.Map("container");    
map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);    
var transit = new BMap.TransitRoute(map, {    
 renderOptions: {map: map, panel: "results"}    
});    
transit.search("王府井", "西单");

var map = new BMap.Map("container");    
map.centerAndZoom(new BMap.Point(116.404, 39.915), 12);    
var transit = new BMap.TransitRoute("北京市");    
transit.setSearchCompleteCallback(function(results){    
 if (transit.getStatus() == BMAP_STATUS_SUCCESS){    
   var firstPlan = results.getPlan(0);    
   // 绘制步行线路    
   for (var i = 0; i < firstPlan.getNumRoutes(); i ++){    
     var walk = firstPlan.getRoute(i);    
     if (walk.getDistance(false) > 0){    
       // 步行线路有可能为0  
       map.addOverlay(new BMap.Polyline(walk.getPoints(), {lineColor: "green"}));    
     }    
   }    
  // 绘制公交线路   
   for (i = 0; i < firstPlan.getNumLines(); i ++){    
     var line = firstPlan.getLine(i);    
     map.addOverlay(new BMap.Polyline(line.getPoints()));    
   }    
   // 输出方案信息  
   var s = [];    
   for (i = 0; i < results.getNumPlans(); i ++){    
     s.push((i + 1) + ". " + results.getPlan(i).getDescription());    
   }    
   document.getElementById("log").innerHTML = s.join("<br>");    
 }    
})    
transit.search("中关村", "国贸桥");

var map = new BMap.Map("container");    
map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);    
var driving = new BMap.DrivingRoute(map, {    
 renderOptions: {    
   map: map,    
   autoViewport: true    
 }    
});    
driving.search("中关村", "天安门");

var map = new BMap.Map("container");    
map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);    
var driving = new BMap.DrivingRoute(map, {    
 renderOptions: {    
   map   : map,     
   panel : "results",    
   autoViewport: true    
 }    
});    
driving.search("中关村", "天安门");

var map = new BMap.Map("container");    
map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);    
var options = {    
 onSearchComplete: function(results){    
   if (driving.getStatus() == BMAP_STATUS_SUCCESS){    
     // 获取第一条方案   
     var plan = results.getPlan(0);      
     // 获取方案的驾车线路   
     var route = plan.getRoute(0);      
     // 获取每个关键步骤，并输出到页面   
     var s = [];    
     for (var i = 0; i < route.getNumSteps(); i ++){    
       var step = route.getStep(i);    
       s.push((i + 1) + ". " + step.getDescription());    
     }    
     document.getElementById("log").innerHTML = s.join("<br>");    
   }    
 }    
};    
var driving = new BMap.DrivingRoute(map, options);    
driving.search("中关村", "天安门");

var map = new BMap.Map("l-map");      
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);      
// 创建地址解析器实例     
var myGeo = new BMap.Geocoder();      
// 将地址解析结果显示在地图上，并调整地图视野    
myGeo.getPoint("北京市海淀区上地10街10号", function(point){      
          if (point) {      
              map.centerAndZoom(point, 16);      
              map.addOverlay(new BMap.Marker(point));      
          }      
      }, "北京市");

var map = new BMap.Map("l-map");      
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);      
// 创建地理编码实例      
var myGeo = new BMap.Geocoder();      
// 根据坐标得到地址描述    
myGeo.getLocation(new BMap.Point(116.364, 39.993), function(result){      
                 if (result){      
                     alert(result.address);      
                  }      
});