使用高德地图,利用搜索功能,获取地址详情、经纬度等信息
效果展示
需求:
1、实现高德地图输入地址自动提示功能 ,根据筛选结果,默认显示第一个结果
2、实现单击获取某个地点的经纬度和地址信息
3、实现筛选地址标注点
4、实现地图回显,再次打开地图定位到之前选中的地址展示详情
5、封装地图组件可在项目中任意地方使用
注意点:首先项目中需要引用高德地图,并且我同步引用了高德的PlaceSearch、AdvancedInfoWindow、Autocomplete这几个插件,高德提供同步引用和异步引用,异步引用的话,需要你自己去高德的文档看看
文档地址:https://lbs.amap.com/api/amap-ui/intro/
首先发一份可直接打开看的vue文件打开地图选择 dialog title="地图选择" :visible.sync="mapDialog" width="80%" :close-on-click-modal="false" :before-close="cancelMap" top="10vh" >
input placeholder="请输入关键字进行查询" v-model="inputAddress" id="tipinput" @clear="inputHandle" @input="clickCancle" clearable >
根据项目需求自己封装的组件(这份代码仅供参考哦),因为我的项目需求中,一个页面会有几处地方用到地图,所以每个地方的地图都需要唯一的id标识来区分哦;如果一个页面只需要用一次地图,是不用考虑这些问题的
封装的组件
打开地图选择 dialog title="地图选择" :visible.sync="mapDialog" width="80%" :close-on-click-modal="false" :before-close="cancelMapClose" top="10vh" append-to-body modal-append-to-body v-if="creatDom" >
input placeholder="请输入关键字进行查询" v-model="inputAddress" id="tipinput" ref="inputBtn" @clear="inputHandle" @input="clickCancle" clearable >
在父组件中引用封装好的组件
第一步首先需要引用
第二步使用 ,注意我是通过$refs 传值给子组件的哦,不是直接用props的哦
点击地图的确定事件,具体逻辑结构依据自己项目需求,我放出来了7个参数,根据自己需求使用哦
这是地图的取消事件 放出来6个参数,根据自己需求使用哦