地圖載入完成後，進行自動定位到裝置當前所在位置（顯示當前周邊），拖拽地圖進行選擇地址，點選搜尋按鈕，搜尋框內輸入時會提示相關點，通過搜尋結果進行搜尋選擇地址

元件部分：

<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