使用高德地图,利用搜索功能,获取地址详情、经纬度等信息


效果展示

需求:

1、实现高德地图输入地址自动提示功能 ,根据筛选结果,默认显示第一个结果

2、实现单击获取某个地点的经纬度和地址信息

3、实现筛选地址标注点 

4、实现地图回显,再次打开地图定位到之前选中的地址展示详情

5、封装地图组件可在项目中任意地方使用

注意点:首先项目中需要引用高德地图,并且我同步引用了高德的PlaceSearch、AdvancedInfoWindow、Autocomplete这几个插件,高德提供同步引用和异步引用,异步引用的话,需要你自己去高德的文档看看

文档地址:https://lbs.amap.com/api/amap-ui/intro/

       首先发一份可直接打开看的vue文件





根据项目需求自己封装的组件(这份代码仅供参考哦),因为我的项目需求中,一个页面会有几处地方用到地图,所以每个地方的地图都需要唯一的id标识来区分哦;如果一个页面只需要用一次地图,是不用考虑这些问题的

封装的组件







在父组件中引用封装好的组件

第一步首先需要引用

 第二步使用 ,注意我是通过$refs 传值给子组件的哦,不是直接用props的哦

点击地图的确定事件,具体逻辑结构依据自己项目需求,我放出来了7个参数,根据自己需求使用哦

 这是地图的取消事件 放出来6个参数,根据自己需求使用哦