vue + 百度地图点选地址（地址逆解析）

最新推荐文章于 2024-07-18 19:20:39 发布

String佳佳

最新推荐文章于 2024-07-18 19:20:39 发布

阅读量1.2k

点赞数 1

本文链接：https://blog.csdn.net/weixin_44171757/article/details/117255343

版权

1、先上效果图：

在这里插入图片描述

2、实现方法：

百度地图的引用方法本篇文章没有提及，需要的可以去百度地图官网查看具体引入教程。

参考官网demo例子


<div id="map" style="width: 100%;height: 500px" />

初始化地图：
intiMap(){
	const map = new BMapGL.Map('map') // 创建地图实例
	const point = new BMapGL.Point(106.553263, 29.557184) // 创建点坐标
	map.centerAndZoom(point, 12) // 初始化地图，设置中心点坐标和地图级别
	map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放
	this.addMapClickEvent(map) // 绑定鼠标点击事件
}

点击事件：
addMapClickEvent(map) {
      const geoc = new BMapGL.Geocoder()
      map.addEventListener('click', (e) => {
        map.clearOverlays() // 清空地图上的覆盖物
        const pt = e.latlng
        const marker = new BMapGL.Marker(new BMapGL.Point(pt.lng, pt.lat))
        map.addOverlay(marker) // 生成覆盖物-marker点
        geoc.getLocation(pt, (rs) => {
        	console.log('点击的当前位置信息---',rs)
        })
     })
}