edit
This commit is contained in:
@ -22,6 +22,9 @@ export class AmapPoiPickerComponent implements OnInit {
|
|||||||
aMap: any;
|
aMap: any;
|
||||||
|
|
||||||
poi: any;
|
poi: any;
|
||||||
|
marker: any;
|
||||||
|
infoWindow: any;
|
||||||
|
geocoder: any;
|
||||||
|
|
||||||
constructor(private modalRef: NzModalRef) {}
|
constructor(private modalRef: NzModalRef) {}
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
@ -75,6 +78,12 @@ export class AmapPoiPickerComponent implements OnInit {
|
|||||||
this.aMap.on('complete', () => {
|
this.aMap.on('complete', () => {
|
||||||
this.poiPickerReady(poiPicker);
|
this.poiPickerReady(poiPicker);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
this.aMap.on('click', (e: any) => {
|
||||||
|
console.log(e);
|
||||||
|
|
||||||
|
this.selectedPOI(e.lnglat);
|
||||||
|
});
|
||||||
})
|
})
|
||||||
.catch(e => {
|
.catch(e => {
|
||||||
throwError(e);
|
throwError(e);
|
||||||
@ -86,7 +95,7 @@ export class AmapPoiPickerComponent implements OnInit {
|
|||||||
(window as any).poiPicker = poiPicker;
|
(window as any).poiPicker = poiPicker;
|
||||||
const map = this.aMap;
|
const map = this.aMap;
|
||||||
// 定位标志
|
// 定位标志
|
||||||
const marker = new AMapUI.SimpleMarker({
|
this.marker = new AMapUI.SimpleMarker({
|
||||||
//图标主题
|
//图标主题
|
||||||
iconTheme: 'default',
|
iconTheme: 'default',
|
||||||
map: map,
|
map: map,
|
||||||
@ -94,41 +103,41 @@ export class AmapPoiPickerComponent implements OnInit {
|
|||||||
});
|
});
|
||||||
|
|
||||||
// 信息窗口
|
// 信息窗口
|
||||||
const infoWindow = new AMap.InfoWindow({
|
this.infoWindow = new AMap.InfoWindow({
|
||||||
offset: new AMap.Pixel(0, -20)
|
offset: new AMap.Pixel(0, -20)
|
||||||
});
|
});
|
||||||
|
|
||||||
|
this.geocoder = new AMap.Geocoder({
|
||||||
|
city: '010', //城市设为北京,默认:“全国”
|
||||||
|
radius: 1000 //范围,默认:500
|
||||||
|
});
|
||||||
|
|
||||||
//选取了某个POI
|
//选取了某个POI
|
||||||
poiPicker.on('poiPicked', (poiResult: any) => {
|
poiPicker.on('poiPicked', (poiResult: any) => {
|
||||||
const source = poiResult.source,
|
const source = poiResult.source,
|
||||||
poi = poiResult.item;
|
poi = poiResult.item;
|
||||||
this.poi = poi;
|
|
||||||
marker.setMap(map);
|
|
||||||
infoWindow.setMap(map);
|
|
||||||
|
|
||||||
marker.setPosition(poi.location);
|
this.marker.setMap(map);
|
||||||
infoWindow.setPosition(poi.location);
|
this.infoWindow.setMap(map);
|
||||||
|
this.selectedPOI(poi.location);
|
||||||
infoWindow.setContent(`地址: <pre>${poi.name}</pre>`);
|
|
||||||
infoWindow.open(map, marker.getPosition());
|
|
||||||
map.setCenter(marker.getPosition());
|
|
||||||
//获取地址所在的行政区
|
|
||||||
AMap.plugin('AMap.Geocoder', () => {
|
|
||||||
var geocoder = new AMap.Geocoder({
|
|
||||||
city: poi.adcode
|
|
||||||
});
|
|
||||||
geocoder.getLocation(poi.name, (status: any, result: any) => {
|
|
||||||
if (status === 'complete' && result.info === 'OK') {
|
|
||||||
// result中对应详细地理坐标信息
|
|
||||||
this.poi.cityInfo = result.geocodes[0].addressComponent;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// poiPicker.onCityReady(function () {
|
selectedPOI(location: any) {
|
||||||
// poiPicker.suggest('美食');
|
this.marker.setPosition(location);
|
||||||
// });
|
|
||||||
|
this.geocoder.getAddress([location.KL, location.kT], (status: any, result: any) => {
|
||||||
|
if (status === 'complete' && result.info === 'OK') {
|
||||||
|
// result中对应详细地理坐标信息
|
||||||
|
result.regeocode.pois = [location.KL, location.kT];
|
||||||
|
this.poi = result.regeocode;
|
||||||
|
// console.log(this.poi);
|
||||||
|
this.infoWindow.setContent(`地址: <pre>${result.regeocode.formattedAddress}</pre>`);
|
||||||
|
this.infoWindow.open(this.aMap, this.marker.getPosition());
|
||||||
|
this.infoWindow.setPosition(location);
|
||||||
|
this.aMap.setCenter(location);
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
closeInfoWindow() {
|
closeInfoWindow() {
|
||||||
|
|||||||
@ -58,7 +58,8 @@ import {
|
|||||||
SwapOutline,
|
SwapOutline,
|
||||||
EyeFill,
|
EyeFill,
|
||||||
EyeInvisibleFill,
|
EyeInvisibleFill,
|
||||||
SolutionOutline
|
SolutionOutline,
|
||||||
|
MinusCircleOutline
|
||||||
} from '@ant-design/icons-angular/icons';
|
} from '@ant-design/icons-angular/icons';
|
||||||
|
|
||||||
export const ICONS_AUTO = [
|
export const ICONS_AUTO = [
|
||||||
@ -116,5 +117,6 @@ export const ICONS_AUTO = [
|
|||||||
EyeFill,
|
EyeFill,
|
||||||
EyeInvisibleFill,
|
EyeInvisibleFill,
|
||||||
SwapOutline,
|
SwapOutline,
|
||||||
SolutionOutline
|
SolutionOutline,
|
||||||
|
MinusCircleOutline
|
||||||
];
|
];
|
||||||
|
|||||||
Reference in New Issue
Block a user