Baidu map - surrounding search

brief introduction

Today we'll learn a more interesting Map apiLocalSearch. Through it, we can search the surrounding addresses on the map , You can also search the address within the specified range .

LocalSearch

1. Belong to Map api The service class , Mainly used for location retrieval 、 Perimeter search and scope search .
2. The parameter type can be a map instance 、 A string of coordinate points or city names .
3. When the parameter is a map instance , The retrieval position is determined by the current map center point , And the labels of the search results will be automatically loaded on the map , It also supports adjusting the view level of the map ; When the parameter is coordinate , The retrieval location is determined by the location of the point ; When the parameter is city name , The search will be conducted in the city .
4. Detailed documentation

Keyword search

• search() Initiate a search based on the search term , When you pass in an array, you can perform multi keyword retrieval .

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

• You're right Map api Powerful function, just a few lines of code to complete the retrieval .
  

Get retrieval data

• In addition to displaying labels on the map , We also need to get the retrieved data for other operations .
• LocalSearch() Second argument to constructor LocalSearchOptions, It is used to obtain the retrieved data .

1. renderOptions Automatic generation DOM The text list block shows .
2. onSearchComplete Callback function after retrieval . Get the retrieved data here .

      ...
      //  Secret  renderOptions Elements used 
      <div id="r-result"></div>
      ...
      var myKeys = [' The hotel ', ' The hospital ']
      var local = new BMapGL.LocalSearch(map, { 
    
        renderOptions: { 
     map: map, panel: 'r-result' },
        onSearchComplete: function (res) { 
    
          console.log(' ~ file:  Map perimeter retrieval .html ~ line 33 ~ res', res)
        }
      })
      local.search(myKeys)

Search by region

• When the search scope is too large, there may be no results or slow response , At this time, the control range is needed .
• searchInBounds() Initiate a scope search based on the scope and search term , Passing in an array can perform multi keyword retrieval .
• BMapGL.Bounds() Create a rectangular area of 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)
      //  Set your own scope 
      var bs = new BMapGL.Bounds(pStart, pEnd)
      local.searchInBounds(' The hospital ', bs)

• In addition to the inner rectangle, of course, there are also circular search methods .
• searchNearby() According to the center point 、 Radius and search term initiate peripheral search . Passing in an array can perform multi keyword retrieval .
• Note that the unit of radius here is rice

      var local = new BMapGL.LocalSearch(map, { 
    
        renderOptions: { 
     map: map, autoViewport: false }
      })
      local.searchNearby(' The hospital ', new BMapGL.Point(121.480509, 31.23592), 1000)

Retrieve data control

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

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

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