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

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

组件部分：
<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，具体配置请自行参照参考手册
点击打开链接 <http://http//lbs.amap.com/api/javascript-api/reference/map>，此处以拖拽地图为例，
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 <http://https//github.com/Nogive/vue-amap>

热门工具换一换