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，具体配置请自行参照参考手册点击打开链接，此处以拖拽地图为例，

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

原文发布时间：
原文作者：kindCoder
本文来源CSDN博客如需转载请紧急联系作者