Vue+高德地图API的使用(点击地图搜索周边信息)

最新推荐文章于 2025-03-07 10:23:08 发布

Jose〠

最新推荐文章于 2025-03-07 10:23:08 发布

阅读量1.8k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_59863007/article/details/126669651

版权

1.给地图添加点击事件

/*
在this.map=new AMap.Map 初始创建地图之后
加上点击事件
*/
this.map.on('click', (e) => {
	//
	console.log(e);
});

在这里插入图片描述

地图点击事件打印的值

接上一个项目，必须要点击了起点或终点的输入框才能继续执行
如果不是按上一个项目可跳过此判断步骤

//判断 是否选择了起点或者终点
if (this.addwho == '') {
	this.$message({
		message: '请选择起点或者终点',
		type: 'warning'
	});
	return
}
//创建一个数组   存放点击地图返回的经纬度
var cpoint = []
cpoint.push(e.lnglat.lng)
cpoint.push(e.lnglat.lat)

在这里插入图片描述

2.通过经纬度搜索附近地址

var placeSearchA = new AMap.PlaceSearch({
	city: this.city,
	pageSize: 10,
	pageIndex: 1, //请求页码，默认1
	autoFitView: false,
});

placeSearchA.searchNearBy('', cpoint, 500, (status, result) => {
	console.log(status, result);
})

在这里插入图片描述

console.log(status, result);打印的参数

3.继续接上一个项目将数据渲染出来

if (result.info == "OK") {
	this.restData = result //搜索出来的数据
	console.log('搜索服务搜索出来的数据', result);
	this.flag = true //显示 附近地址
}

总体代码

//地图实例的点击事件
this.map.on('click', (e) => {
	if (this.addwho == '') {
		this.$message({
			message: '请选择起点或者终点',
			type: 'warning'
		});
		return
	}
	var cpoint = []
	cpoint.push(e.lnglat.lng)
	cpoint.push(e.lnglat.lat)
	var placeSearchA = new AMap.PlaceSearch({
		city: this.city,
		pageSize: 10,
		pageIndex: 1, //请求页码，默认1
		autoFitView: false,
	});
	placeSearchA.searchNearBy('', cpoint, 500, (status, result) => {
		if (result.info == "OK") {
			this.restData = result
			this.flag = true
		}
	})
});