vue2中使用高德地图实现搜索定位(二)
由于赶项目,搜索获取某个位置信息实现后并未解决点击地图也可以获取相应的位置信息,后来实现,以此记录:
需求:可以搜索点位,也可以在地图上点击获取位置的详细信息,并制作成组件
过程:通过查询发现原来用的搜索组件并不支持给予初始值,自然也无法把点图上点击的地点位置信息获取后显示在搜索框中,提炼成组件以后也无法回显,只能用input输入,再增加搜索后的提示列表来模拟:
代码如下:
主页面vue文件
搜索:{{primitiveData.name}},详细地址为:{{primitiveData.locationName}},经度:{{primitiveData.longitude}},纬度:{{primitiveData.latitude}}
组件vue页面:
{{item.name}}{{item.address}}
地图的引入可以参考上一篇,由于vue-amap是根据element的框架开发,为了方便也引入了element ui。详细代码下载:https://gitee.com/yuexiayunsheng/amapdemo