基于百度地图实现单击地图展示详细地址功能

应用场景介绍

该代码用于实现单击百度地图上的任意位置,即可在指定位置显示该点的详细地址信息。此功能广泛应用于位置定位、导航、信息查询等场景。

代码基本功能介绍

此代码利用百度地图的单击事件监听,当用户单击地图上的任意位置时,清除地图上的所有覆盖物,并添加一个标记。然后,使用百度地图的地理编码器获取单击点的详细地址信息,并将其显示在指定的位置。

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

  1. 加载必要资源
async mounted() {
  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、WebGL渲染引擎、信息框、富标记、绘图管理器和距离测量工具。

  1. 实例化地图
var map = new BMapGL.Map('container')
map.centerAndZoom(new BMapGL.Point(116.331398, 39.897445), 13)

此代码创建了一个百度地图实例,将其添加到具有ID为“container”的元素中,并将其中心设置为北京市,缩放级别为13。

  1. 添加单击事件监听
map.addEventListener('click', function (e) {
  //清除地图上所有的覆盖物
  map.clearOverlays()
  console.log(e)
  var pt = e.latlng
  var marker = new BMapGL.Marker(new BMapGL.Point(pt.lng, pt.lat))
  map.addOverlay(marker)
  geoc.getLocation(pt, function (rs) {
    var addComp = rs.addressComponents
    $('#result_l').text(
      addComp.province +
        ', ' +
        addComp.city +
        ', ' +
        addComp.district +
        ', ' +
        addComp.street +
        ', ' +
        addComp.streetNumber,
    )
  })
})

此代码为地图添加了一个单击事件监听器。当用户单击地图上的任意位置时,将清除地图上的所有覆盖物,然后在单击位置添加一个标记。接着,使用地理编码器获取单击点的详细地址信息,并将其显示在具有ID为“result_l”的元素中。

总结与展望

通过实现此功能,用户可以轻松地获取百度地图上任意位置的详细地址信息。该功能可用于开发各种基于位置的应用程序,例如导航、位置共享和地址查询。

未来,此功能可以进一步拓展和优化,例如:

  • 优化地理编码请求,以提高地址获取速度。
  • 添加地址解析功能,允许用户输入地址并将其转换为地图上的位置。
  • 整合其他地图服务,如高德地图或谷歌地图,以提供更全面的位置服务。
登录
ECHO推荐
ScriptEcho.ai

用户批注

地址逆解析

我要吐槽
新手指引
在线客服