How to use JS and Baidu Maps to implement map search function

How to use JS and Baidu Maps to implement map search function

The map search function is a common feature in many websites and applications today, which can help users find Location and related information for specific locations. This article will introduce how to use JS and Baidu Map API to implement this function, and provide specific code examples.

First of all, we need to introduce the JS library of Baidu Maps into the web page, which can be loaded in the following way:

<script src="http://api.map.baidu.com/api?v=2.0&ak=your_api_key"></script>

The your_api_key here is the Baidu Map Open Platform API key applied for on. If you have not applied yet, you can go to the Baidu Map Open Platform website to register and create a new application, and then obtain the API key.

After introducing the Baidu map library, we need to create a map container in the web page to display the map. You can add a <div> element to the HTML file to create a map container and assign it a unique ID, such as <code>mapContainer:

<div id="mapContainer" style="width: 100%; height: 500px;"></div>

Next , we can use JS code to initialize the map and set some basic map properties:

var map = new BMap.Map("mapContainer"); // 创建地图实例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 设置地图中心点和缩放级别
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放功能

After the map initialization is completed, we can add a search box and a search button to allow users to enter keywords and trigger searches operate. You can add the following code to the HTML file:

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

Then, define a search function in the JS code to handle the search operation. In this function, we first need to get the keywords entered by the user, and then use the LocalSearch class of Baidu Map API to perform map search:

function search() {
  var keyword = document.getElementById("keyword").value;
  
  var localSearch = new BMap.LocalSearch(map, {
    renderOptions: { map: map },
    onSearchComplete: function(results) {
      if (localSearch.getStatus() === BMAP_STATUS_SUCCESS) {
        // 搜索成功，处理搜索结果
        for (var i = 0; i < results.getCurrentNumPois(); i++) {
          var poi = results.getPoi(i);
          console.log(poi.title, poi.address, poi.point); // 打印搜索结果的标题、地址和位置信息
        }
      } else {
        // 搜索失败，处理错误信息
        console.log(localSearch.getStatus(), localSearch.getResults());
      }
    }
  });
  
  localSearch.search(keyword);
}

In this code, we first pass The document.getElementById method obtains the input value of the search box and saves it to the variable keyword. Then create a LocalSearch instance, pass in the rendering options of the map and search results as parameters, and define a onSearchComplete callback function to process the search results.

In the onSearchComplete callback function, we first determine whether the search is successful through the localSearch.getStatus() method. If successful, we can use results.getCurrentNumPois The () method obtains the number of search results, traverses these results, and uses the results.getPoi(i) method to obtain the detailed information of each result, such as title, address, location, etc. Finally, we use the console.log method to print this information to the console.

If the search fails, we can get the error status code through the localSearch.getStatus() method, and get the error information through the localSearch.getResults() method.

Finally, when the user clicks the search button, the search function will be triggered to perform a map search operation. Search results will be printed in the console and displayed on the map.

To sum up, we can easily implement the map search function with the help of JS and Baidu Maps API. Through a search box and search button, users can enter keywords and then use Baidu Map's LocalSearch class to conduct map searches and display the results on the map. From this basic implementation, you can further customize how search results are displayed and interacted with to meet your specific needs.

Note: The above sample code is for demonstration purposes only. When used in practice, it needs to be modified and adjusted appropriately according to specific projects and needs.