该代码用于实现单击百度地图上的任意位置,即可在指定位置显示该点的详细地址信息。此功能广泛应用于位置定位、导航、信息查询等场景。
此代码利用百度地图的单击事件监听,当用户单击地图上的任意位置时,清除地图上的所有覆盖物,并添加一个标记。然后,使用百度地图的地理编码器获取单击点的详细地址信息,并将其显示在指定的位置。
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渲染引擎、信息框、富标记、绘图管理器和距离测量工具。
var map = new BMapGL.Map('container')
map.centerAndZoom(new BMapGL.Point(116.331398, 39.897445), 13)
此代码创建了一个百度地图实例,将其添加到具有ID为“container”的元素中,并将其中心设置为北京市,缩放级别为13。
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”的元素中。
通过实现此功能,用户可以轻松地获取百度地图上任意位置的详细地址信息。该功能可用于开发各种基于位置的应用程序,例如导航、位置共享和地址查询。
未来,此功能可以进一步拓展和优化,例如: