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