地图加载完成后，进行自动定位到设备当前所在位置（显示当前周边），拖拽地图进行选择地址，点击搜索按钮，搜索框内输入时会提示相关点，通过搜索结果进行搜索选择地址
组件部分：
<
template
>
<
div
>
<
button
@click="startPosition"
>定位
</
button
>
<
div
class=
"toolbar"
>
{{address}}
</
div
>
<
hr
>
<
div
class=
"amap-page-container"
>
<
el-amap
vid=
"amap"
:zoom="zoom"
class=
"amap-demo"
:center="center"
:amapManager="amapManager"
>
<
el-amap-marker
:position="center"
></
el-amap-marker
>
</
el-amap
>
</
div
>
</
div
>
</
template
>
注：el-amap-circle只是为了更直观的看到效果，可以省略。
js部分：
<
script
>
import {AMapManager}
from
"vue-amap"
let amapManager=
new AMapManager();
export
default {
data() {
let self =
this;
return {
zoom:
16,
center: [
121.329402,
31.228667],
lng:
0,
lat:
0,
address:
'',
amapManager,
// 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();
// }
// });
// }
// }
// }]
};
},
methods:{
startPosition(){
//方法二
let vm=
this;
let map=
this.amapManager.getMap();
let geolocation;
map.plugin(
'AMap.Geolocation',
function () {
geolocation =
new AMap.Geolocation({
enableHighAccuracy:
true,
//是否使用高精度定位，默认:true
timeout:
10000,
//超过10秒后停止定位，默认：无穷大
maximumAge:
0,
//定位结果缓存0毫秒，默认：0
convert:
true,
//自动偏移坐标，偏移后的坐标为高德坐标，默认：true
showButton:
true,
//显示定位按钮，默认：true
buttonPosition:
'LB',
//定位按钮停靠位置，默认：'LB'，左下角
buttonOffset:
new AMap.Pixel(
10,
20),
//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
showMarker:
true,
//定位成功后在定位到的位置显示点标记，默认：true
showCircle:
true,
//定位成功后用圆圈表示定位精度范围，默认：true
panToLocation:
true,
//定位成功后将定位到的位置作为地图中心点，默认：true
zoomToAccuracy:
true,
//定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
extensions:
'all'
});
map.addControl(geolocation);
geolocation.getCurrentPosition();
AMap.event.addListener(geolocation,
'complete',
function(data){
console.log(data);
vm.address=data.formattedAddress;
vm.lng=data.position.lng;
vm.lat=data.position.lat;
});
//返回定位信息
AMap.event.addListener(geolocation,
'error',
function(data){
console.log(data);
});
//返回定位出错信息
});
}
}
};
</
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