首先需要在index.html中引入高德地图的资源链接，key需要换成你自己的key
cnpm install vue-amap --save-dev 安装高德地图依赖
在build/webpack.base.config.js中的module.exports中添加
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: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)!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)
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;
}
}
}
借鉴的是一个小姐姐的文章，但是链接找不到了，不好意思！
可以复制代码的链接：https://blog.csdn.net/qq_42165062/article/details/92782197
网友评论