Vue+Ts 实现高德附近位置搜索功能

<div class="header">
<el-input
popper-class="autocomplete"
class="inline-input"
v-model="keywords"
:fetch-suggestions="querySearch"
placeholder="请输入您要查找的位置 "
@select="handleSelect"
>
</el-input>
<el-button @click.native="search">
搜索
</el-button>
</div>
<ul class="list">
<li v-for="(item,index) in restaurants" v-bind:key="index" @click="onLiClick(item)" @mouseenter="mouseLeave(item)" @mouseleave="mouseover(item)" :style="item.active">
<span class="name" >{{item.value}}</span>
<span class="address">{{item.address}}</span>
</li>
</ul>
<el-form :inline="false" >
<el-form-item class="button">
<el-button type="primary" @click="confirm()">确定</el-button>
<el-button type="primary" @click="cancel()">取消</el-button>
</el-form-item>
</el-form>
</div>
</template>

import { Component, Vue, Prop,Emit } from "vue-property-decorator";
import axios from 'axios';

type ImageType = {
name:string,
url: string,
sourseUrl:string,
state1:string
}

@Component
export default class BuildingSearch extends Vue {

@Prop({default: ''}) organizationHelpId!: string

keywords=""
restaurants:Array<any>=[]
pois:any
item:any

@Emit('onConfirm')
confirm(){
return this.item;
}

@Emit('closeDialog')
cancel() {

}

mouseLeave(item:any){
item.active = 'background-color: #cccccc';
}
mouseover(item:any){
item.active = '';

}
onLiClick(item:any){
this.keywords=item.value;
this.item=item;
}

querySearch(queryString:string,cb:any){

this.keywords=queryString;
this.getLocation(cb)

}

search(){

this.getLocation()
}

mounted(){
this.getLocation()
}

handleSelect(item:any){
this.item=item;
}
getLocation(cb?:any){
var map = new AMap.Map('container', {
resizeEnable: true
});

AMap.plugin('AMap.Geolocation', ()=> {
var geolocation = new AMap.Geolocation({
enableHighAccuracy: true,//是否使用高精度定位，默认:true
timeout: 10000, //超过10秒后停止定位，默认：5s
buttonPosition:'RB', //定位按钮的停靠位置
buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点

});

map.addControl(geolocation);
geolocation.getCurrentPosition((status:any,result:any)=>{
if(status=='complete'){
if(result.position){
let lat=result.position.lat;
let lng=result.position.lng;

axios.get(`https://restapi.amap.com/v3/place/around?output=json&location=${lng},${lat}&key=e9659beaec074eb1b0c3707aed38a448&offset=10&page=1&keywords=${this.keywords}`)
.then( (response)=> {
if(response&&response.data&&response.data.pois){
this.pois=(response.data.pois as any);
if(cb){
this.restaurants = []
this.pois.forEach((item:any) => {
this.restaurants.push({
value:item.name,
address:item.address,
location:item.location
})
});
cb(this.restaurants);
}else{
this.restaurants = []
this.pois.forEach((item:any) => {
this.restaurants.push({
value:item.name,
address:item.address,
location:item.location
})
});
}
}
})
.catch(function (error) {
console.log(error);
});
}
// onComplete(result)
}else{
console.log("result");
// onError(result)
}
});
});
}

//解析定位结果
onComplete(data:any) {
// document.getElementById('status').innerHTML='定位成功'
var str = [];
str.push('定位结果：' + data.position);
str.push('定位类别：' + data.location_type);
if(data.accuracy){
str.push('精度：' + data.accuracy + ' 米');
}//如为IP精确定位结果则没有精度信息
str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
// document.getElementById('result').innerHTML = str.join('<br>');
}
//解析定位错误信息
onError(data:any) {
// document.getElementById('status').innerHTML='定位失败'
// document.getElementById('result').innerHTML = '失败原因排查信息:'+data.message;
}

}
</script>

.name{
text-overflow: ellipsis;
overflow: hidden;
}
.address{
margin-top: 2.4px;
font-size: 12px;
color: #b4b4b4;
}
}
}
.button{
margin-top: 10px;
}
}

</style>

效果如下：
Vue+Ts 实现高德附近位置搜索功能