

<!-- 
/**
  * 高德地图组件
  * @param: {Object} opts [top, left, eventOutClose(事件超出容器后关闭, 默认false), showCloseBtn(默认false)]
  *	@example1: 
	
		1, 引入
			import cuAmap from '@/components/AMap';

		2, 注册
			export default {
				components: {
					DateRangePicker, cuAmap
				},
			}
		
		3, 创建
			<cu-amap 
				ref="amap" 
				:mapinfo="mapinfo"
				:onload="amapOnload" 
				@click="mapClick" 
			/>
		 4, 使用
		 	var camap = this.$refs.amap;
			camap.addMarker({});

  * @author: Kimber
  * @createtime: 2021/7/3
  */
 -->
<template>
	<div id="AMap" class="amap">地图</div>
</template>
<script>
export default {
	name: 'amap',
	data() {
		return {
			icons:{
				red1:'https://webapi.amap.com/theme/v1.3/markers/n/mark_rs.png',
				red2:'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png',
				Default1:'https://webapi.amap.com/theme/v1.3/markers/n/mark_bs.png',
				Default2:'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
			},
		}
	},
	props:{
		mapinfo: {
			type: Object,
			default: {},
		},
		onload: {
			type: Function,
		},
	},
	watch: {

	},
	created() {
		var that = this;
		
		/**
		  * 初始化地图
		  * @param: {Object} options  {
				center:[107.260044, 36.737982],
				showLabel: true,
				pitch: 40,
				zoom: 4,
				mapStyle: 'amap://styles/grey',		(normal(标准), dark(幻影黑), light(月光银), whitesmoke(远山黛), fresh(草色青), grey(雅士灰), graffiti(涂鸦), macaron(马卡龙), blue(靛青蓝), darkblue(极夜蓝), wine(酱籽))
			};
		  *	@example1: var camap = this.$refs.amap.init(options);
		  * @return: 
		  * @author: Kimber
		  * @updatetime: 2021/7/15(周四)
		  * @createtime: 2021/7/15(周四)
		  */
		this.$nextTick(() => {
			var Map = new AMap.Map('AMap', {
				resizeEnable: true, // 是否监控地图容器尺寸变化
				zoom: this.mapinfo.zoom, // 初始化地图层级
				center: [this.mapinfo.longitude, this.mapinfo.latitude], // 初始化地图中心点
			});

			Map.on('click', function(ev) {
				// 触发事件的对象
				var target = ev.target;
				// 触发事件的地理坐标，AMap.LngLat 类型
				var lnglat = ev.lnglat;
				// 触发事件的像素坐标，AMap.Pixel 类型
				var pixel = ev.pixel;
				// 触发事件类型
				var type = ev.type;

				if(type === 'click'){
					that.$emit('click', ev, Map, that);
				};
			});

			this.Map = Map;
			
			this.onload && this.onload()
		})
	},
	mounted() {
	},
	methods: {
		/**
		  * 添加标记
		  * @param: {Object} options []
		  *	@example1: this.$refs.amap.addMarker({});
		  * @example2: 
				camap.addMarker({
					lnglat:[data.lng, data.lat],
					title:'',
					draggable:true,
					dragend: function(e){
						var lnglat = e.lnglat;
						camap.deGeocode([lnglat.lng, lnglat.lat], function(addr){
							that.form.item.lng = lnglat.lng;
							that.form.item.lat = lnglat.lat;
							that.form.item.address = addr;
						});
					},
				});
		  * @method: Kimber
		  * @return: 
		  * @create: 2021/6/11
		  */
		addMarker(param){
			if(this.marker){
				this.removeMarker()
			};

			if(param.lnglat && param.lnglat[0]){
				var marker = this.marker = new AMap.Marker({
					//icon: param.icon,
					map: this.Map,
					position: param.lnglat,   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
					title: param.title,
					draggable: param.draggable,
				});

				marker.on('dragging', function(e){
					param.dragging && param.dragging(e)
				});

				marker.on('dragend', function(e){
					param.dragend && param.dragend(e)
				});

				return marker
			};
		},
		removeMarker(){
			this.Map.remove(this.marker);
		},

		/**
		  * 地理位置解码
		  * @param: {Array} lnglat [longitude, latitude]
		  *	@example1: this.$refs.amap.deGeocode([lnglat.lng, lnglat.lat], function(addr){});
		  * @method: Kimber
		  * @return: 
		  * @create: 2021/6/11
		  */
		deGeocode(lnglat, fn){
            AMap.service('AMap.Geocoder', function() {
				var geocoder = new AMap.Geocoder({});
				geocoder.getAddress(lnglat, function(status, result) {
                    if (status === 'complete' && result.info === 'OK') {
                        //var address = result.regeocode.formattedAddress;
						var addrObj = result.regeocode.addressComponent || {};
						var address = addrObj.province + addrObj.city + addrObj.district + addrObj.township;
						fn && fn(address, addrObj)
                    } else {
                    }
                });
            });
		},
		/**
		  * 设置中心点
		  * @param: {Arrar} arr
		  *	@example1: this.$refs.amap.setCenter([lng, lat]);
		  * @createtime: 2021/7/2
		  */
		setCenter: function(arr){
			this.Map.setCenter(arr)
		},
		/**
		  * 根据中心点 marker 自适应缩放
		  * @param: {Arrar} arr
		  *	@example1: this.$refs.amap.setFitView(marker);
		  * @createtime: 2021/7/3
		  */
		setFitView: function(marker){
			this.Map.setFitView(marker)
		},
		/**
		  * 按地址定位坐标
		  * @param: {String} str
		  *	@example1: this.$refs.amap.addressSearch(addr).then((res) => {});
		  * @createtime: 2021/7/3
		  */
		addressSearch: function(str){
			return new Promise(function(resolve, reject){
				// 实例化Autocomplete
				var autoOptions = {
					city: '全国'
				}
				var autoComplete = new AMap.Autocomplete(autoOptions);
				autoComplete.search(str, function(status, result) {
					var list = result.tips || [];
					for(var item of list){
						if(item.location){
							return resolve(item)
						};
					};
					return resolve(list.pop())
				})
			})
		},

		/**
		  * 按区域画高亮遮罩层
		  * @param: {Object} opts 
			opts = {
				level: "province", // province(省), country(国)			在区域内搜索(行政区级别)
				city: '威海市',
				color: '#00000cc',
				strokeColor: 'rgba(7, 247, 247, 1)',
				fillColor: 'rgba(7, 247, 247, 1)',
			}
		  *	@example1: 
		  * @return: 
		  * @author: Kimber
		  * @updatetime: 2021/7/15(周四)
		  * @createtime: 2021/7/15(周四)
		  */
		area3DLayer: function(opts){
			var cMap = this.Map;
			var district = new AMap.DistrictSearch({
				subdistrict: 1,
				extensions: 'all',
				level: opts.level
			});

			district.search(opts.city, function (status, result) {
				var bounds = result.districtList[0].boundaries;
				var mask = []
				for (var i = 0; i < bounds.length; i += 1) {
					mask.push([bounds[i]])
				};

				//添加高度面
				var object3Dlayer = new AMap.Object3DLayer({zIndex: 1});
				cMap.add(object3Dlayer)
				var height = -7000;
				var wall = new AMap.Object3D.Wall({
					path: bounds,
					height: height,
					color: opts.color
				});
				wall.transparent = true
				object3Dlayer.add(wall)
				//添加描边
				for (var i = 0; i < bounds.length; i += 1) {
					var polygon = new AMap.Polygon({
						map: cMap,
						bubble: true,
						strokeWeight: 1,
						strokeDasharray: [10, 20],
						strokeColor: opts.strokeColor || 'rgba(7, 247, 247, 1)',
						fillColor:  opts.fillColor || 'rgba(7, 247, 247, 1)',
						fillOpacity: 0.5,
						path: bounds[i],
					})		
				}
			});
		},
	}
}
</script>

<style lang="scss" scoped>
	.amap{height:100%;width:100%;}
</style>
