Baidu Maps provides services--local search, range search_html/css_WEB-ITnose

Overview of map services

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, which provides location search services in a specific area, such as searching for "park" in Beijing.

TransitRoute: Transit navigation provides search services for bus travel options in a specific area.

DrivingRoute: driving guide provides search services for driving travel plans.

WalkingRoute: Walking Navigation, which provides search services for walking travel plans.

Geocoder: Address parsing, which provides services for converting address information into coordinate point information.

LocalCity: Local City, providing a service to automatically determine the city where you are.

TrafficControl: Real-time traffic control, providing real-time and historical traffic information services.

　Searching for the service interface of class requires to specify a search scope , otherwise the interface will not work.

Local Search

　BMap.LocalSearch provides local search service. When using local search, you need to set a search area for it. Retrieval Area can It is a BMap.Map object, a BMap.Point object or a string of province or 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 the 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 example below, 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 middle. 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 search results being automatically added to maps and lists, you can also obtain detailed data information through the data interface. Combined with the map API, you can add labels and information windows to the map yourself. 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 around a specific result point Search.

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

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

rectangular area Search example

<html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />    <style type="text/css">        body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}        #allmap{width:100%;height:500px;}        p{margin-left:5px; font-size:14px;}    </style>    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>    <title>搜索区域内关键词</title></head><body>    <div id="allmap"></div>    <p>返回北京市矩形框区域范围内的“银行”关键字的检索结果，并展示在地图上</p></body></html><script type="text/javascript">    // 百度地图API功能    var map = new BMap.Map("allmap");            // 创建Map实例    map.centerAndZoom(new BMap.Point(116.274625,39.961627), 11);    map.enableScrollWheelZoom();                            //启用滚轮放大缩小    var local = new BMap.LocalSearch(map, {        renderOptions:{map: map}    });    var pStart = new BMap.Point(116.274625,39.961627);    var pEnd = new BMap.Point(116.367474,39.988609);    var bs = new BMap.Bounds(pStart,pEnd);   //自己规定范围    local.searchInBounds("银行", bs);    var polygon = new BMap.Polygon([        new BMap.Point(pStart.lng,pStart.lat),        new BMap.Point(pEnd.lng,pStart.lat),        new BMap.Point(pEnd.lng,pEnd.lat),        new BMap.Point(pStart.lng,pEnd.lat)        ], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});    map.addOverlay(polygon);</script>

Rendering:

　Thank you for your patience in reading!