地图加载完成后，进行自动定位到设备当前所在位置（显示当前周边），拖拽地图进行选择地址，点击搜索按钮，搜索框内输入时会提示相关点，通过搜索结果进行搜索选择地址
组件部分：
<
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();
// }
// });
// }
// }
// }]
搜索
此处使用的是UI组件里面的'misc/PoiPicker' new一个PoiPicker实例并绑定搜索框，选中的搜索出来的某一条结果，讲改结果的经纬路设为中心点，即可实现搜索选择地址的效果
效果如下：
此案例的git地址：前往git
