基于百度地图API的圆形范围检索功能实现

应用场景

该代码用于实现基于百度地图API的圆形范围检索功能，可在给定地图中心点和半径的情况下，在指定范围内检索特定类型的兴趣点（POI），并在地图上以标记的形式展示检索结果。

基本功能

• **圆形范围检索：**根据指定中心点和半径，检索指定范围内的POI。
• **地图标记展示：**将检索到的POI以标记的形式在地图上展示，方便用户查看。
• **POI信息展示：**点击标记可展示该POI的详细信息，如名称、地址、电话等。

功能实现步骤及关键代码分析

1. 加载百度地图API

await Promise.all([
  this.loadScripts([
    'https://api.map.baidu.com/api?type=subway&v=1.0&ak=cxtWZ9zGiLlLdQwBSuGGwpanwqfaLvEc&services=&t=20240319170303',
    'http://api.map.baidu.com/getscript?type=webgl&v=1.0&ak=cxtWZ9zGiLlLdQwBSuGGwpanwqfaLvEc&services=&t=20240319170303',
    'https://mapopen.bj.bcebos.com/github/BMapGLLib/InfoBox/src/InfoBox.js',
    'https://mapopen.bj.bcebos.com/github/BMapGLLib/RichMarker/src/RichMarker.min.js',
    'https://mapopen.bj.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.js',
    'https://mapopen.cdn.bcebos.com/github/BMapGLLib/DistanceTool/src/DistanceTool.min.js',
  ]),
  this.loadStyles([
    'http://api.map.baidu.com/res/webgl/10/bmap.css',
    'http://mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.css',
  ]),
])

• 加载必要的百度地图API脚本和样式表。

2. 初始化百度地图

var map = new BMapGL.Map('container') // 创建Map实例
var mPoint = new BMapGL.Point(116.404, 39.915)
map.enableScrollWheelZoom()
map.centerAndZoom(mPoint, 15)

• 创建百度地图实例，并设置中心点、缩放级别和开启鼠标滚轮缩放。

3. 绘制圆形覆盖物

var circle = new BMapGL.Circle(mPoint, 1000, {
  fillColor: 'blue',
  strokeWeight: 1,
  fillOpacity: 0.3,
  strokeOpacity: 0.3,
})
map.addOverlay(circle)

• 绘制一个半径为1000米的圆形覆盖物，并添加到地图中。

4. 范围检索POI

var local = new BMapGL.LocalSearch(map, {
  renderOptions: { map: map, autoViewport: false },
})
local.searchNearby('餐馆', mPoint, 1000)

• 创建本地搜索实例，并指定检索类型为“餐馆”，检索范围为圆形覆盖物的范围。

5. 展示检索结果

本地搜索完成后，会触发回调函数，将检索到的POI以标记的形式展示在地图上。

总结与展望

通过这段代码，我们实现了基于百度地图API的圆形范围检索功能。该功能可以应用于各种场景，如附近餐馆搜索、周边景点查询等。

未来，可以对该功能进行拓展和优化，例如：

• 支持自定义检索范围和类型。
• 提供更丰富的POI信息展示，如营业时间、评分等。
• 集成其他地图API，如高德地图、腾讯地图等，提供更全面的地图服务。