地图加载完成后,进行自动定位到设备当前所在位置(显示当前周边),拖拽地图进行选择地址,点击搜索按钮,搜索框内输入时会提示相关点,通过搜索结果进行搜索选择地址
组件部分:
<
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