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, //请求页码，默认1autoFitView: 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, //请求页码，默认1autoFitView: false,});placeSearchA.searchNearBy('', cpoint, 500, (status, result) => {if (result.info == "OK") {this.restData = resultthis.flag = true}})
});

效果图：

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

vue + 高德原生 API实现地图可视化
vue + 高德原生 API 由于项目需求,需要使用地图定位,最终决定使用 vue + 高德原生API: 当前项目环境 vue2.0+: 创建项目时,如果安装 eslint ,建议关闭eslint语法 ...
Python调用高德地图API实现经纬度换算、地图可视化
作者 | 糖甜甜甜出品 | 经管人学数据分析 Python调用高德地图API实现经纬度换算.地图可视化前地图可视化的工具和函数比较多,但是在不知道相关地点经纬度的情况下,通过python调用高德地 ...
【高德地图API】汇润做爱地图技术大揭秘
原文:[高德地图API]汇润做爱地图技术大揭秘昨日收到了高德地图微信公众号的消息推送,说有[一大波免费情趣用品正在袭来],点进去看了一眼,说一个电商公司(估计是卖情趣用品的)用高德云图制作了一张可以 ...
你还在为高德地图找不到门牌号等详细地址而烦恼吗？你还在等什么——Python调用高德地图API实现经纬度换算、地图可视化
Python调用高德地图API实现经纬度换算.地图可视化前地图可视化的工具和函数比较多,但是在不知道相关地点经纬度的情况下,通过python调用高德地图API实现经纬度换算,并且直接在高德地图新推出 ...
【高德地图API】从零开始学高德JS API（三）覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物
原文地址为: [高德地图API]从零开始学高德JS API(三)覆盖物--标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物摘要:覆盖物,是一张地图的灵魂.有覆盖物的地图,才是完整的 ...
python 根据经纬度调取和显示地图_Python调用高德地图API实现经纬度换算、地图可视化-站长资讯中心...
目前地图可视化的工具和函数比较多,但是在不知道相关地点经纬度的情况下,通过python调用高德地图API实现经纬度换算,并且直接在高德地图新推出的轻量级可视化平台上实现一键式地图可视化,这其中需要申请 ...
python调用高德地图api 可视化_Python调用高德地图API实现经纬度换算、地图可视化...
前地图可视化的工具和函数比较多,但是在不知道相关地点经纬度的情况下,通过python调用高德地图API实现经纬度换算,并且直接在高德地图新推出的轻量级可视化平台上实现一键式地图可视化,这其中需要申请密 ...
百度地图API（三）电子围栏—地图点击事件创建多边形
百度地图API(四)电子围栏-DrawingManager 分析电子围栏:顾名思义就是一个多边形,然后终端或者其他什么东西在这个围栏中,如果离开围栏则通知离开了围栏,而做这个电子围栏应该就是鼠标点击 ...
js添加多marker 高德地图_【高德地图API】从零开始学高德JS API（三）覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物...
摘要:覆盖物,是一张地图的灵魂.有覆盖物的地图,才是完整的地图.在一张地图上,除了底层的底图(瓦片图,矢量图),控件(有功能可操作的工具),最重要最不可缺少的就是覆盖物了.覆盖物有多种,包括,标注.折 ...
python百度地图api经纬度_Python调用百度地图和高德地图API批量获取国内城市地址经纬度坐标...
1 数据准备经过尝试,百度地图API需要输入城市中文名称才能获取对应经纬度坐标,因此先将英文的城市名称转为中文一共347个城市由于在测试过程中发现高德和百度地图API分别有几个城市的地址无法获取 ...

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

1.给地图添加点击事件

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

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

总体代码

效果图：

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

最新文章

热门文章