地图加载完成后，进行自动定位到设备当前所在位置（显示当前周边），拖拽地图进行选择地址，点击搜索按钮，搜索框内输入时会提示相关点，通过搜索结果进行搜索选择地址
组件部分：
<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, //显示定位按钮，默认：trueshowMarker: false, //定位成功后在定位到的位置显示点标记，默认：trueextensions:'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
