vue 使用高德地图实现搜索+点击定位效果

首先需要在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