This commit is contained in:
wangshiming
2021-12-13 13:16:52 +08:00
parent c4b249fe94
commit abafcd8326
10 changed files with 139 additions and 75 deletions

View File

@ -1,6 +1,19 @@
<!--
* @Author: your name
* @Date: 2021-12-07 14:19:25
* @LastEditTime: 2021-12-13 11:02:14
* @LastEditors: your name
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: \tms-obc-web\src\app\shared\components\amap\amap-poi-picker\amap-poi-picker.component.html
-->
<div nz-row class="mb-xl">
<div nz-col nzSpan="8">
<input id="pickerInput" [(ngModel)]="addressInput" placeholder="请输入地址" />
<input id="pickerInput" [(ngModel)]="addressInput" placeholder="请输入地址" />
</div>
</div>
<div class="map-container" id="container" tabindex="0" style="width: 800px; height: 500px"></div>
</div>
<div class="map-container" id="container" tabindex="0" style="width: 800px; height: 500px"></div>
<div *nzModalFooter>
<button nz-button nzType="default" (click)="cancel()">取消</button>
<button nz-button nzType="primary" (click)="sure()">确定</button>
</div>

View File

@ -1,7 +1,8 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { throwError } from 'rxjs';
import AMapLoader from '@amap/amap-jsapi-loader';
import { Component, OnInit, ViewChild } from '@angular/core';
import { amapConf } from '@conf/amap.config';
import { NzModalRef } from 'ng-zorro-antd/modal';
import { throwError } from 'rxjs';
declare var AMap: any;
declare var AMapUI: any;
declare var Loca: any;
@ -14,15 +15,15 @@ const CONFIG = amapConf;
styleUrls: ['./amap-poi-picker.component.less']
})
export class AmapPoiPickerComponent implements OnInit {
@ViewChild('modal')
modal: any;
// @ViewChild('modal')
// modal: any;
addressInput: any;
aMap: any;
poi: any;
constructor() {}
constructor(private modalRef: NzModalRef) {}
ngOnInit(): void {
this.mapInit();
// this.PoiPicker();
@ -79,6 +80,7 @@ export class AmapPoiPickerComponent implements OnInit {
});
}
//POI选点
poiPickerReady(poiPicker: any) {
(window as any).poiPicker = poiPicker;
const map = this.aMap;
@ -99,7 +101,6 @@ export class AmapPoiPickerComponent implements OnInit {
poiPicker.on('poiPicked', (poiResult: any) => {
const source = poiResult.source,
poi = poiResult.item;
console.log(poi);
this.poi = poi;
marker.setMap(map);
infoWindow.setMap(map);
@ -107,18 +108,29 @@ export class AmapPoiPickerComponent implements OnInit {
marker.setPosition(poi.location);
infoWindow.setPosition(poi.location);
infoWindow.setContent('地址: <pre>' + poi.name + '</pre>');
infoWindow.setContent(`地址: <pre>${poi.name}</pre>`);
infoWindow.open(map, marker.getPosition());
map.setCenter(marker.getPosition());
//获取行政区信息
map.getCity(function (info: any) {
poi.cityInfo = info;
});
});
poiPicker.onCityReady(function () {
poiPicker.suggest('美食');
});
// poiPicker.onCityReady(function () {
// poiPicker.suggest('美食');
// });
}
closeInfoWindow() {
this.aMap.clearInfoWindow();
}
sure() {
this.modalRef.destroy();
}
cancel() {
this.modalRef.destroy();
}
}