137 lines
3.3 KiB
TypeScript
137 lines
3.3 KiB
TypeScript
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;
|
||
|
||
const CONFIG = amapConf;
|
||
|
||
@Component({
|
||
selector: 'amap-poi-picker',
|
||
templateUrl: './amap-poi-picker.component.html',
|
||
styleUrls: ['./amap-poi-picker.component.less']
|
||
})
|
||
export class AmapPoiPickerComponent implements OnInit {
|
||
// @ViewChild('modal')
|
||
// modal: any;
|
||
addressInput: any;
|
||
|
||
aMap: any;
|
||
|
||
poi: any;
|
||
|
||
constructor(private modalRef: NzModalRef) {}
|
||
ngOnInit(): void {
|
||
this.mapInit();
|
||
// this.PoiPicker();
|
||
}
|
||
|
||
ngOnDestroy(): void {
|
||
if (this.aMap) {
|
||
this.aMap.destroy();
|
||
}
|
||
}
|
||
|
||
mapInit() {
|
||
AMapLoader.load({
|
||
// 首次调用 load
|
||
key: CONFIG.key, // 申请好的Web端开发者Key，首次调用 load 时必填
|
||
version: CONFIG.version, // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||
plugins: [
|
||
// 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
||
'AMap.SimpleMarker',
|
||
'AMap.PoiPicker',
|
||
'AMap.Scale',
|
||
'AMap.InfoWindow',
|
||
'AMap.Geolocation'
|
||
],
|
||
AMapUI: {
|
||
// 是否加载 AMapUI，缺省不加载
|
||
version: CONFIG.AMapUIVersion, // AMapUI 缺省 1.1
|
||
plugins: ['overlay/SimpleMarker', 'misc/PoiPicker'] // 需要加载的 AMapUI ui插件
|
||
},
|
||
Loca: {
|
||
// 是否加载 Loca， 缺省不加载
|
||
version: CONFIG.LocaVersion // Loca 版本，缺省 1.3.2
|
||
}
|
||
})
|
||
.then(AMap => {
|
||
// 搜索picker
|
||
var poiPicker = new AMapUI.PoiPicker({
|
||
input: 'pickerInput'
|
||
});
|
||
|
||
// 地图
|
||
this.aMap = new AMap.Map('container', {
|
||
resizeEnable: true,
|
||
zoom: 16
|
||
});
|
||
|
||
// 地图创建成功
|
||
this.aMap.on('complete', () => {
|
||
this.poiPickerReady(poiPicker);
|
||
});
|
||
})
|
||
.catch(e => {
|
||
throwError(e);
|
||
});
|
||
}
|
||
|
||
//POI选点
|
||
poiPickerReady(poiPicker: any) {
|
||
(window as any).poiPicker = poiPicker;
|
||
const map = this.aMap;
|
||
// 定位标志
|
||
const marker = new AMapUI.SimpleMarker({
|
||
//图标主题
|
||
iconTheme: 'default',
|
||
map: map,
|
||
position: map.getCenter()
|
||
});
|
||
|
||
// 信息窗口
|
||
const infoWindow = new AMap.InfoWindow({
|
||
offset: new AMap.Pixel(0, -20)
|
||
});
|
||
|
||
//选取了某个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(`地址: <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('美食');
|
||
// });
|
||
}
|
||
|
||
closeInfoWindow() {
|
||
this.aMap.clearInfoWindow();
|
||
}
|
||
|
||
sure() {
|
||
this.modalRef.destroy();
|
||
}
|
||
cancel() {
|
||
this.modalRef.destroy();
|
||
}
|
||
}
|