How to use JS and Baidu Maps to implement the search function within the map area

How to use JS and Baidu Maps to implement the search function within the map area

With the rapid development of the mobile Internet, map applications have become an indispensable tool in people's daily lives one. Among the many map applications, Baidu Maps is one of the most popular. Baidu Maps provides rich map data and powerful API interfaces, providing developers with many possibilities. This article will introduce how to use JS and Baidu Map API to implement the search function within the map area, and give specific code examples.

First, we need to introduce the JS library of Baidu Map API. Introduce the following code into the tag of HTML:

<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=您的百度地图AK"></script>

The ak here is the key you applied for on the Baidu Map Open Platform. If you still If you don’t have an application, you can go to [Baidu Map Open Platform](http://lbsyun.baidu.com/index.php?title=jspopular/guide/getkey) to apply for one.

Next, we need to create a map container to display the map. Create a <div> element within the <code> tag of HTML and set a unique id to it, as follows:

<div id="map"></div>

Then, we can create a map object in JS code by getting the id, and set the initial center point and zoom level of the map display, as follows:

var map = new BMap.Map("map");
var point = new BMap.Point(116.404, 39.915); // 设置地图初始中心点
map.centerAndZoom(point, 15); // 设置地图初始缩放级别

HereBMap.Map is the map constructor provided by Baidu Map API. Create a map center point object through BMap.Point, and then pass map.centerAndZoom Method to set the center point and zoom level of the map.

Next, we need to add a search input box and search button for users to enter search keywords and trigger search operations. Add the following code in the tag of HTML:

<input type="text" id="keyword" placeholder="请输入搜索关键词">
<button onclick="search()">搜索</button>

Then, get the search keywords entered by the user in the JS code and use the searchInBounds of Baidu Map API Method to search within the area, as shown below:

function search() {
  var keyword = document.getElementById("keyword").value;
  var bounds = map.getBounds(); // 获取地图可视区域范围
  var searchOptions = {
    onSearchComplete: function(results) {
      // 处理搜索结果
      console.log(results);
    }
  };
  var localSearch = new BMap.LocalSearch(map, searchOptions);
  localSearch.searchInBounds(keyword, bounds);
}

The map.getBounds() method here returns the range of the current visible area of ​​the map, BMap.LocalSearch is the local search constructor provided by Baidu Map API, and uses the localSearch.searchInBounds method to perform keyword searches in the area.

Finally, we can process the search results in the callback function of the search results, such as displaying the marked points of the search results on the map. Markers can be created using the BMap.Marker constructor and added to the map via the map.addOverlay method, as shown below:

var searchOptions = {
  onSearchComplete: function(results) {
    map.clearOverlays(); // 清除地图上的所有标记点
    for (var i = 0; i < results.getCurrentNumPois(); i++) {
      var poi = results.getPoi(i);
      var point = poi.point;
      var marker = new BMap.Marker(point); // 创建标记点
      map.addOverlay(marker); // 添加标记点到地图上
    }
  }
};

This is it , we have completed all the code to implement the search function within the map area using JS and Baidu Map API. Next, you can further optimize and expand according to your own needs, such as adding custom styles, clicking on markers to display more information, etc.

Summary:
This article introduces how to use JS and Baidu Map API to implement the search function within the map area, and gives specific code examples. Using the Baidu Map API, we can easily conduct keyword searches within the area on the map and display the search results. I hope this article was helpful and I wish you success in your development!