diff --git a/src/app/shared/components/amap/amap-poi-picker/amap-poi-picker.component.ts b/src/app/shared/components/amap/amap-poi-picker/amap-poi-picker.component.ts index 9e8c54da..c9577188 100644 --- a/src/app/shared/components/amap/amap-poi-picker/amap-poi-picker.component.ts +++ b/src/app/shared/components/amap/amap-poi-picker/amap-poi-picker.component.ts @@ -22,6 +22,9 @@ export class AmapPoiPickerComponent implements OnInit { aMap: any; poi: any; + marker: any; + infoWindow: any; + geocoder: any; constructor(private modalRef: NzModalRef) {} ngOnInit(): void { @@ -75,6 +78,12 @@ export class AmapPoiPickerComponent implements OnInit { this.aMap.on('complete', () => { this.poiPickerReady(poiPicker); }); + + this.aMap.on('click', (e: any) => { + console.log(e); + + this.selectedPOI(e.lnglat); + }); }) .catch(e => { throwError(e); @@ -86,7 +95,7 @@ export class AmapPoiPickerComponent implements OnInit { (window as any).poiPicker = poiPicker; const map = this.aMap; // 定位标志 - const marker = new AMapUI.SimpleMarker({ + this.marker = new AMapUI.SimpleMarker({ //图标主题 iconTheme: 'default', 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) }); + this.geocoder = new AMap.Geocoder({ + city: '010', //城市设为北京,默认:“全国” + radius: 1000 //范围,默认:500 + }); + //选取了某个POI poiPicker.on('poiPicked', (poiResult: any) => { const source = poiResult.source, poi = poiResult.item; - this.poi = poi; - marker.setMap(map); - infoWindow.setMap(map); - marker.setPosition(poi.location); - infoWindow.setPosition(poi.location); - - infoWindow.setContent(`地址:
${poi.name}`);
- 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;
- }
- });
- });
+ this.marker.setMap(map);
+ this.infoWindow.setMap(map);
+ this.selectedPOI(poi.location);
});
+ }
- // poiPicker.onCityReady(function () {
- // poiPicker.suggest('美食');
- // });
+ selectedPOI(location: any) {
+ 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(`地址: ${result.regeocode.formattedAddress}`);
+ this.infoWindow.open(this.aMap, this.marker.getPosition());
+ this.infoWindow.setPosition(location);
+ this.aMap.setCenter(location);
+ }
+ });
}
closeInfoWindow() {
diff --git a/src/style-icons-auto.ts b/src/style-icons-auto.ts
index cf0f7334..f1bebba5 100644
--- a/src/style-icons-auto.ts
+++ b/src/style-icons-auto.ts
@@ -58,7 +58,8 @@ import {
SwapOutline,
EyeFill,
EyeInvisibleFill,
- SolutionOutline
+ SolutionOutline,
+ MinusCircleOutline
} from '@ant-design/icons-angular/icons';
export const ICONS_AUTO = [
@@ -116,5 +117,6 @@ export const ICONS_AUTO = [
EyeFill,
EyeInvisibleFill,
SwapOutline,
- SolutionOutline
+ SolutionOutline,
+ MinusCircleOutline
];