vue+高德地图实现地图搜索及点击定位操作

2023-07-16 23:59:03 230

首先需要在index.html中引入高德地图的js链接，key需要换成你自己的key

最近有个需求是实现一个使用地图搜索定位的功能，在网上参考了下其他的文章，感觉不是很完善，自己整理了一下，可以实现点击定位，搜索列表定位等功能，可能有些地方是多余的，需要的自己看着改下

效果图如下

下边就是实现过程

html部分

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:1pxsolid#ccc;
}
}
.amap_lib_placeSearch{
height:100%;
overflow-y:scroll;
.poibox{
border-bottom:1pxsolid#eaeaea;
cursor:pointer;
padding:5px05px10px;
position:relative;
min-height:35px;
.selected{
background-image:url(https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png)!important;
}
&:hover{
background:#f6f6f6;
}
.poi-img{
float:right;
margin:3px8px0;
width:90px;
height:56px;
overflow:hidden;
}
.poi-title{
margin-left:25px;
font-size:13px;
overflow:hidden;
}
.poi-info{
word-break:break-all;
margin:00025px;
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)
no-repeat;
height:31px;
width:19px;
cursor:pointer;
left:-1px;
text-align:center;
color:#fff;
font:12pxarial,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+高德地图实现地图搜索及点击定位操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

vue+高德地图实现地图搜索及点击定位操作

热门推荐

随机推荐