这篇文章主要介绍了vue+高德地图实现地图搜索及点击定位操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
首先需要在index.html中引入高德地图的js链接，key需要换成你自己的key
最近有个需求是实现一个使用地图搜索定位的功能，在网上参考了下其他的文章，感觉不是很完善，自己整理了一下，可以实现点击定位，搜索列表定位等功能，可能有些地方是多余的，需要的自己看着改下
效果图如下
下边就是实现过程
html部分
{{index+1}} {{item.name}}
地址：{{item.address}}
电话：{{item.tel}}
js部分
css部分
#wrap{ width:100%; display: flex; #iCenter { height: 600px; position: relative; display: flex; flex: 1; } #searchWrap{ width:300px; position: relative; height:600px; .searchWrap{ position: absolute; width:300px; z-index: 9; display: flex; align-items: center; input{ width:260px; height:24px; } button{ width:36px; height:28px; } } #result { width: 300px; position: absolute; top:30px; height: 570px; z-index: 8; overflow-y: scroll; border-right: 1px solid #ccc; } } .amap_lib_placeSearch { height: 100%; overflow-y: scroll; .poibox { border-bottom: 1px solid #eaeaea; cursor: pointer; padding: 5px 0 5px 10px; position: relative; min-height: 35px; .selected { background-image: url(https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png-600) !important; } &:hover { background: #f6f6f6; } .poi-img { float: right; margin: 3px 8px 0; width: 90px; height: 56px; overflow: hidden; } .poi-title { margin-left: 25px; font-size: 13px; overflow: hidden; } .poi-info { word-break: break-all; margin: 0 0 0 25px; overflow: hidden; p { color: #999; font-family: Tahoma; line-height: 20px; font-size: 12px; } } .poibox-icon { margin-left: 7px; margin-top: 4px; } .amap_lib_placeSearch_poi { background: url(https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png-600) no-repeat; height: 31px; width: 19px; cursor: pointer; left: -1px; text-align: center; color: #fff; font: 12px arial, simsun, sans-serif; padding-top: 3px; position: absolute; } } } .btn{ position: fixed; bottom:20px; left:50%; padding:10px; } }
补充知识：vue-amap 高德地图定位 点击获取经纬度和具体地址的使用
官方文档地址： 点这里！！
经纬度获取只要通过点击事件就可以通过e.lnglat来获取，然后就是插件Geocoder使用了。在main.js中initAMapApiLoader中写入：AMap.Geocoder，注意 官方文档中有提示：
所以插件中使用的依然是AMap,与导入名无关
不然会报错，Geocoder无法使用。
定位文档 照着文档写就行 注意在main.js中注册AMap.Geolocation插件，
另外使用到地图的.vue页面 不能使用scoped对样式进行局域化。
以上这篇vue+高德地图实现地图搜索及点击定位操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持本站。
以上就是vue+高德地图实现地图搜索及点击定位操作的详细内容，更多请关注本站其它相关文章！
