VUE——自动定位+拖拽选址+搜索选址

小编 2026-06-05 阅读:516 评论:0

地图加载完成后，进行自动定位到设备当前所在位置（显示当前周边），拖拽地图进行选择地址，点击搜索按...

地图加载完成后，进行自动定位到设备当前所在位置（显示当前周边），拖拽地图进行选择地址，点击搜索按钮，搜索框内输入时会提示相关点，通过搜索结果进行搜索选择地址

组件部分：

<template>
<div>
<button @click="addRadius">增加范围</button>
<button @click="startSearch">搜索</button>
<p>{{address}}</p>
<hr>
<div class="amap-page-container">
<input v-if="toSearch" type="text" class="search-input" id="search">
<el-amap
vid="amap"
:zoom="zoom"
class="amap-demo"
:center="center"
:amapManager="amapManager"
:events="events"
>
<el-amap-circle
vid="circle"
:center="center"
:radius="radius"
fill-opacity="0.2"
strokeColor="#38f"
strokeOpacity="0.8"
strokeWeight="1"
fillColor="#38f"
>
</el-amap-circle>
</el-amap>
</div>
<ul>
<li v-for="item in result" :key="item.id">{{item.name}}</li>
</ul>
</div>
</template>

注：el-amap-circle只是为了更直观的看到效果，可以省略。

<style scoped>
.amap-page-container {
height: 300px;
position: relative;
}
.search-input{
border: 1px solid red;
position: absolute;
z-index: 5;
width: 80%;
left: 10%;
padding: 5px;
}
.toolbar{
margin-top: 15px;
}
</style>

js部分：

<script>
import {AMapManager} from "vue-amap"
let amapManager=new AMapManager();
export default {
data() {
let vm = this;
return {
zoom:16,
center: [121.329402,31.228667],
result:[],
address:"",
radius:100,
toSearch:false,
amapManager,
map:null,
events:{
init(o){
vm.map=o;
//方法一
// AMapUI.loadUI(['misc/PositionPicker'], function(PositionPicker) {
// var positionPicker = new PositionPicker({
// mode: 'dragMap',
// map: o
// });
// positionPicker.on('success', function(positionResult){
// vm.result=positionResult.regeocode.pois;
// vm.address=positionResult.regeocode.formattedAddress;
// vm.center=[positionResult.position.lng,positionResult.position.lat]
// })
// positionPicker.start();
// })
}
}
};
},
watch:{
map:function(){
if(this.map!=null){
this.startDrag();
}
}
},
methods:{
startDrag(){//方法二
let vm=this;
let map=this.amapManager.getMap();
AMapUI.loadUI(['misc/PositionPicker'], function(PositionPicker) {
var positionPicker = new PositionPicker({
mode: 'dragMap',
map: map
});
//定位
let geolocation;
map.plugin('AMap.Geolocation', function () {
geolocation=new AMap.Geolocation({
showButton: true, //显示定位按钮，默认：true
showMarker: false, //定位成功后在定位到的位置显示点标记，默认：true
extensions:'all'
})
map.addControl(geolocation);
geolocation.getCurrentPosition();
AMap.event.addListener(geolocation, 'complete', function(data){
positionPicker.start();
});//返回定位信息
})
positionPicker.on('success', function(positionResult){
vm.result=positionResult.regeocode.pois;
vm.address=positionResult.regeocode.formattedAddress;
vm.center=[positionResult.position.lng,positionResult.position.lat]
})
positionPicker.on('fail', function(failResult){
console.log(failResult)
})
// positionPicker.start();
})
},
addRadius(){
this.radius+=10;
},
startSearch() {
let vm=this;
let map=this.amapManager.getMap();
this.toSearch=true;
AMapUI.loadUI(['misc/PoiPicker'], function(PoiPicker) {
var poiPicker = new PoiPicker({
input: 'search', //输入框id
});
//监听poi选中信息
poiPicker.on('poiPicked', function(poiResult) {
//用户选中的poi点信息
vm.center=[poiResult.item.location.lng,poiResult.item.location.lat]
});
});
},
}
};
</script>

说明：

拖拽选点使用的是UI组件里面的misc/PositionPicker，new一个positionPicker实例，对拖拽进行配置，可以选择拖拽地图还是marker，具体配置请自行参照参考手册点击打开链接，此处以拖拽地图为例，

positionPicker实例有success方法和fail方法，分别对应拖拽选址成功和失败，返回的参数为拖拽后的地址以及周边，失败信息。
定义好后,positionPicker.start()，则可以开始拖拽（若不调用开始方法，则无法进行拖拽）
有两种写法（JS中已经给注释）
1,地图加载完成后，即在init方法中，直接进行定义
2，地图init完成后记录当前map实例，监控map实例，若map初始化完成，则调用方法，进行相关操作
此处以第2中为例

监控map实例，当map实例存在时，将中心点定位到当前设备所在地点，定位成功后启动拖拽选择功能

拓展：

若只使用定位功能

可以在el-amap上绑定plugin属性，

:plugin="plugin"

在data中进行定位插件绑定，配置定位的参数

// plugin: [{ //方法一
// pName: 'Geolocation',
// events: {
// init(o) {
// // o 是高德地图定位插件实例
// o.getCurrentPosition((status, result) => {
// console.log(status);
// console.log(result);
// if (result && result.position) {
// self.lng = result.position.lng;
// self.lat = result.position.lat;
// self.center = [self.lng, self.lat];
// self.loaded = true;
// self.$nextTick();
// }
// });
// }
// }
// }]