Baidu map – peripheral search

This is the fourth day of my participation in the August More text Challenge. For details, see:August is more challenging

Introduction to the

Today we’re going to look at a fun map API called LocalSearch. Through it, we can search the surrounding address on the map, and also can search the address in the specified range.

LocalSearch

1. Belong toThe map APIService class, mainly used for location search, peripheral search and range search.
2. The parameter type can be a string of map instance, coordinate point, or city name.
3. When the parameter is a map instance, the retrieval location is determined by the central point of the current map, and the annotation of the search results is automatically loaded into the map, and the view level of the map can be adjusted. When the parameter is a coordinate, the retrieval position is determined by the position of the point. When the parameter is a city name, the search takes place within the city.
4. Detailed documentation

Keyword search

• search()A search is initiated by a search term, and a multi-keyword search can be performed when an array is passed in.

var local = new BMapGL.LocalSearch(map, {
    renderOptions: { map: map }
})
local.search('hospital')
Copy the code

• No wrong inThe map APIPowerful function with just a few lines of code to complete the retrieval.

Retrieve retrieval data

• In addition to displaying the annotation on the map in development, we need to retrieve the retrieved data for other operations.
• LocalSearch()Second argument to the constructorLocalSearchOptionsIs used to obtain the retrieved data.

1. renderOptionsAutomatically generateDOMText list block display.
2. onSearchCompleteCallback function after the retrieval is complete. This is where the retrieved data is retrieved.

.// The element used by renderOptions
      <div id="r-result"></div>
      ...
      var myKeys = ['hotel'.'hospital']
      var local = new BMapGL.LocalSearch(map, {
        renderOptions: { map: map, panel: 'r-result' },
        onSearchComplete: function (res) {
          console.log('🚀 ~ file: map peripheral retrieval. HTML ~ line 33 ~ res', res)
        }
      })
      local.search(myKeys)
Copy the code

Retrieval by region

• When the search scope is too large, there may be no results or slow response, which is the time to control the scope.
• searchInBounds()Initiate a range search based on the range and the search term, and pass in an array to perform a multi-keyword search.
• BMapGL.Bounds()Creates a rectangular area with geographic coordinates.

      var local = new BMapGL.LocalSearch(map, {
        renderOptions: { map: map }
      })
      var pStart = new BMapGL.Point(121.480509.31.23592)
      var pEnd = new BMapGL.Point(126.480509.36.23592)
      // Define your own scope
      var bs = new BMapGL.Bounds(pStart, pEnd)
      local.searchInBounds('hospital', bs)
Copy the code

• In addition to the inside rectangle, of course, there are circular search methods.
• searchNearby()Initiate peripheral search according to center point, radius and search term. Multiple keyword retrieval can be performed by passing an array.
• And notice that the radius here is in meters

      var local = new BMapGL.LocalSearch(map, {
        renderOptions: { map: map, autoViewport: false }
      })
      local.searchNearby('hospital'.new BMapGL.Point(121.480509.31.23592), 1000)
Copy the code

Retrieval data control

• The retrieved data is not returned all at once; it is returned by paging. In this way, we can control how much data is presented in a range to ensure the user experience.
• setPageCapacity()Set how many pieces of data to display on a page.
• gotoPage()Jumps data to the specified page.

      / / the total number of pages
      var pageAll = 0
      var myKeys = ['hotel'.'hospital']
      var local = new BMapGL.LocalSearch(map, {
        renderOptions: { map: map, panel: 'r-result' },
        onSearchComplete: function (res) {
          console.log('🚀 ~ file: map peripheral retrieval. HTML ~ line 35 ~ res', res)
          pageAll = res[0].getNumPages()
        }
      })
      local.setPageCapacity(20)
      local.search(myKeys)

      var i = 0 / / number of pages
      function onBut() {
        if (i === pageAll) {
          i = 0
        } else {
          i++
        }
        local.gotoPage(i)
      }
Copy the code