封装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) 设置标记
 *  -->
 */
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), // 图标尺寸
			image: 'assets/tmp/icon/marker.png',
			imageSize: new AMap.Size(23, 34), // 根据所设置的大小拉伸或压缩图片
		});

		this.marker = new AMap.Marker({
			icon: endIcon,
			position: new AMap.LngLat(this.Lng, this.Lat), // 基点位置
			offset: new AMap.Pixel(-10, -30), // 相对于基点的偏移位置
		});
		//定位当前经纬到中心
		this.setCenter(this.Lng, this.Lat);
		//标记当前经纬
		this.marker.setMap(this.map)
		//左侧缩放平移工具(插件)
		this.map.plugin(['AMap.ToolBar'], () => {
			if (this.ifToolBar) {
				this.map.addControl(new AMap.ToolBar());
			}
		});
		//监听鼠标点击
		this.map.on('click', $event => {
			//设置标记
			let lng = $event.lnglat.lng;
			let lat = $event.lnglat.lat;
			// this.setIcon(lng, lat);
			//获取地址
			this.getAddress(lng, lat).then((res: any) => {
				let obj = {
					type: 'click',
					lng: lng,
					lat: lat,
					address: res,
				}
				//返回经纬和地址
				this.clickMap.emit(JSON.stringify(obj));
			}).catch(() => {
				console.log('catch');
			})
		});
		//监听鼠标拖动
		this.map.on('dragend', () => {
			const center = this.map.getCenter();
			//设置标记
			let lng = center.lng;
			let lat = center.lat;
			// this.setIcon(lng, lat);
			//获取地址
			this.getAddress(lng, lat).then((res: any) => {
				let obj = {
					type: 'drag',
					lng: lng,
					lat: lat,
					address: res,
				}
				//返回经纬和地址
				this.dragMap.emit(JSON.stringify(obj));
			}).catch(() => {
				console.log('catch');
			})
		});
		//搜索服务
		// this.map.plugin(['AMap.Autocomplete'], () => {
		// 	this.map.addControl(new AMap.Autocomplete({ input: "tipinput" }));
		// });
	}

	//定位到中心
	setCenter(lng, lat) {
		this.map.setCenter(new AMap.LngLat(lng, lat));
	}
	//设置标记
	setIcon(lng, lat) {
		this.marker.setPosition(new AMap.LngLat(lng, lat));
	}
	//根据经纬获取地址
	getAddress(lng, lat) {
		return new Promise((resolve, reject) => {
			this.geocoder.getAddress(
				[lng, lat],
				(status, result) => {
					if (status === 'complete' && result.regeocode) {
						let address = result.regeocode.formattedAddress;
						resolve(address);
					} else {
						reject();
					}
				});
		})
	}
}

四、使用示例

html:

	
	<app-map #map [ifToolBar]="true" [Lng]="" [Lat]="39.90919" [mapWidth]="'600px'" [mapHeight]="'300px'" [zoom]="18"
		(clickMap)="clickMap($event)" (dragMap)="dragMap($event)">app-map>
	

ts:

//地图测试
	lng = "116.39741";
	lat = "39.90919";
	clickMap(evt) {
		console.log('clickMap');
		console.log(JSON.parse(evt));
		let lnglat = JSON.parse((evt));
		//修改icon
		// this.mapEle.setIcon(lnglat.lng, lnglat.lat);
	}
	dragMap(evt) {
		console.log('dragMap');
		console.log(JSON.parse(evt));
		let lnglat = JSON.parse((evt));
		//修改icon
		// this.mapEle.setIcon(lnglat.lng, lnglat.lat);
	}

自定义标记位置

可以使用组件中的setIcon()方法，例如：

//地图元素
@ViewChild('map') mapEle: MapComponent;

//修改icon
this.mapEle.setIcon(lng, lat);

五、高德api

高德api的导入和相关使用参考官方文档：官方文档

组件中用到的类有：

1. AMap.Geocoder 地理编码与逆地理编码类（插件）
   getAddress(location:LngLat|Array.,
   callback:function(status:String,result:info/ReGeocodeResult)) 获取坐标对应的地址信息

tips: 插件要在JS API 的入口地址中添加plugin参数，文档里写着同步加载时才需要，可能是我操作不对的原因？？

2. AMap.Marker 点标记
   setMap(map:Map) 为Marker指定目标显示地图
   setPosition(lnglat:LngLat) 设置点标记位置
3. AMap.Icon 图标类
4. AMap.LngLat 经纬度坐标
5. AMap.Pixel 像素点
6. AMap.Map 地图对象类
   plugin(name:String/Array,
   callback:Function) 插件加载方法
   addControl(obj:Object) 添加控件,参数可以是插件列表中的任何插件对象
   getCenter( ) 获取地图中心点经纬度坐标值
   setCenter(position:LngLat) 设置地图显示的中心点
7. AMap.Size 地物对象的像素尺寸
8. AMap.ToolBar 工具条(插件)

组件中用到的事件

文档：事件
on( eventName, handler, context) 注册事件，给Map或者覆盖物对象注册事件

类型二

一、效果

二、功能描述

点击弹出地图

三、 组件代码

html:

<div class="clickmap" (click)="openMap()">
	<i nz-icon nzType="environment" nzTheme="outline">i>
	<span>{{address}}span>
div>
<div class="mask" *ngIf="isBigMap" (click)="isBigMap = false">
	<div class="mapBox">
		<div #map id="container2" class="map">div>
	div>
div>

less:

.clickmap {
	cursor: pointer;
	color : #40a9ff;
}

.mask {
	position  : fixed;
	width     : 100%;
	height    : 100%;
	background: rgba(0, 0, 0, 0.5);
	top       : 0;
	left      : 0;
	z-index   : 9999;

	.map {
		// width     : 700px;
		// height    : 480px;
		display      : block;
		margin       : 0 auto;
		margin-top   : 10%;
	}
}

ts:

import {
	Component,
	OnInit,
	Input,
	Renderer2,
	ElementRef,
	ViewChild,
} from '@angular/core';
import { _HttpClient } from '@delon/theme';
declare var AMap: any;
@Component({
	selector: 'app-map-ckaddress',
	templateUrl: './map-ckaddress.component.html',
	styleUrls: ['./map-ckaddress.component.less'],
})
/**
 * 点击弹出地图modal
 * address 详细地址
 * gpsLong 经度
 * gpsLat 纬度
 * mapWidth 宽
 * mapHeight 高
 * ifToolBar 是否显示左侧绽放平移工具
 * 
 */
export class MapCkaddressComponent implements OnInit {
	@ViewChild('map')
	private mapEl: ElementRef;
	//详细地址
	@Input() address = null;
	//经纬度
	@Input() gpsLong = null;
	@Input() gpsLat = null;
	//是否显示左侧绽放平移工具
	@Input() ifToolBar = true;
	//地图宽高
	@Input() mapWidth = '700px';
	@Input() mapHeight = '480px';
	isBigMap;
	map;
	marker;
	ngOnInit() {

	}
	constructor(private renderer: Renderer2) { }
	openMap() {
		this.isBigMap = true;
		//测试
		console.log(this.gpsLong);
		console.log(this.gpsLat);
		setTimeout(() => {
			this.initMap(this.gpsLong, this.gpsLat);
		}, 50);
	}
	initMap(gpsLong, gpsLat) {
		// 初始化地图层级
		this.map = new AMap.Map('container2', {
			zoom: 16,
		});
		//地图宽高
		//测试 
		console.log(this.mapWidth);
		console.log(this.mapHeight);
		console.log(this.mapEl.nativeElement);
		this.renderer.setStyle(this.mapEl.nativeElement, 'width', this.mapWidth);
		this.renderer.setStyle(this.mapEl.nativeElement, 'height', this.mapHeight);
		//当前经纬定位到中心
		this.map.setCenter(new AMap.LngLat(this.gpsLong, this.gpsLat));
		//标记当前经纬
		const endIcon = new AMap.Icon({
			size: new AMap.Size(23, 34),
			image: 'assets/tmp/icon/marker.png',
			imageSize: new AMap.Size(23, 34),
		});
		this.marker = new AMap.Marker({
			icon: endIcon,
			position: new AMap.LngLat(this.gpsLong, this.gpsLat),
			offset: new AMap.Pixel(-10, -30),
		});
		this.marker.setMap(this.map);
		// 默认中心点为当前位置
		let geolocation: any;
		this.map.plugin('AMap.Geolocation', function () {
			geolocation = new AMap.Geolocation({
				enableHighAccuracy: true,
				timeout: 10000,
				buttonOffset: new AMap.Pixel(10, 20),
				zoomToAccuracy: true,
				buttonPosition: 'RB',
			});
		});
		//左侧缩放平移工具(插件)
		this.map.plugin(['AMap.ToolBar'], () => {
			if (this.ifToolBar) {
				this.map.addControl(new AMap.ToolBar());
			}
		});
	}
}

四、使用示例

html:

<app-map-ckaddress [mapWidth]="'700px'" [mapHeight]="'480px'" [address]="address"
				[gpsLong]="longitude" [gpsLat]="latitude">app-map-ckaddress>

五、 高德api

同上