< 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 >