封装2个高德地图组件

类型一

一、效果

二、功能描述

1. 根据经纬度展示地图位置
2. 点击地图返回点击处的经纬和地址
3. 拖动地图返回中心处的经纬和地址
4. 设置标记

三、组件代码

html:

<div #map id="mapComponent" class="map"></div>

ts:

import {
   
	Component,
	OnInit,
	Input,
	EventEmitter,
	Output,
	Renderer2,
	ElementRef,
	ViewChild,
} from '@angular/core';
import {
    _HttpClient } from '@delon/theme';
declare var AMap: any;
@Component({
   
	selector: 'app-map',
	templateUrl: './map.component.html',
	styleUrls: ['./map.component.less'],
})
/**
 * ifToolBar 是否展示缩放平移工具
 * Lng 初始经度
 * Lat 初始纬度
 * mapWidth 宽度
 * mapHeight 高度
 * zoom 层级
 * clickMap 点击地图事件（返回点击点的经纬和地址）
 * dragMap 拖动地图事件（返回中心点的经纬和地址）
 * setIcon(lng,lat) 设置标记
 * <app-map [ifToolBar]="false" [Lng]="116.406315" [Lat]="39.908775" [mapWidth]="'500px'" [mapHeight]="'500px'"
	[zoom]="16" (clickMap)="clickMap($event)" (dragMap)="dragMap($event)"></app-map> -->
 */
export class MapComponent implements OnInit {
   
	@ViewChild('map')
	private mapEl: ElementRef;
	@Input() frameworkContratId = null;
	@Input() showInDetail = true; // 展示搜索框
	@Output() clickMap: EventEmitter<string> = new EventEmitter();
	@Output() dragMap: EventEmitter<string> = new EventEmitter();
	map: any;

	//地图宽高
	@Input() mapWidth = '376px';
	@Input() mapHeight = '210px';
	//经纬度
	@Input() Lng = '116.397415';
	@Input() Lat = '39.90919';
	//地图层级
	@Input() zoom = 16;
	//是否显示左侧绽放平移工具
	@Input() ifToolBar = true;
	//搜索文字
	@Input() searchInput = '';
	//地理编码对象
	geocoder: any;
	//覆盖物对象
	marker: any;
	constructor(private renderer: Renderer2) {
    }
	ngOnInit() {
    }
	ngAfterViewInit() {
   
		this.initMap();
	}

	initMap() {
   
		//地图宽高
		this.renderer.setStyle(this.mapEl.nativeElement, 'width', this.mapWidth);
		this.renderer.setStyle(this.mapEl.nativeElement, 'height', this.mapHeight);
		// 初始化
		this.map = new AMap.Map('mapComponent', {
   
			zoom: this.zoom,
		});
		this.geocoder = new AMap.Geocoder({
   
			city: "010", //城市设为北京，默认：“全国”
			radius: 1000 //范围，默认：500
		});
		const endIcon = new AMap.Icon({
   
			size: new AMap.Size(23, 34),