vue百度地图，获取点击经纬度的省市区

最新推荐文章于 2024-04-16 15:59:38 发布

原创最新推荐文章于 2024-04-16 15:59:38 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #百度 #前端

地图专栏收录该内容

2 篇文章

订阅专栏

这篇博客介绍了如何在Vue应用中结合Baidu地图API，利用`BMap.Geocoder()`服务监听地图点击事件，获取点击位置的详细地址。通过`@click`事件和`getLocation`方法，实现了地图交互功能，从而能够从用户点击的地图坐标中获取地址信息。

部署运行你感兴趣的模型镜像

核心：

使用 baidu-map 的 click 方法
BMap.Geocoder() 下的 getLocation({lng, lat}, function(result) {})

<baidu-map
    :zoom="10"
    @ready="handleReady"
    @click="clickInfo"
    :scroll-wheel-zoom="true"
    :center="center"
    :mapClick="false">
</baidu-map>

methods: {
	handleReady({ BMap, map }) {
		this.BMap = BMap
		this.map = map
	},
	clickInfo(e) {
		if (e.type == 'click') {
			new this.BMap.Geocoder().getLocation(e.point, res => {
			    console.log(res, 'result.addressComponents')
				let result = res.addressComponents
			})
		}
	}
}