<template>
	<div id="AMap" class="amap">地图</div>
</template>

<script>
export default {
	name: 'amap',
	data() {
		return {
			
		}
	},
	props:{
		mapinfo: {
			type: Object,
			default: {},
		},
	},
	watch: {

	},
	created() {
		var that = this;

		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;
		})
	},
	methods: {
		/**
		  * 添加标记
		  * @param: {Object} options []
		  *	@example1: this.$refs.amap.addMarker({});
		  * @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({
					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)
				});
			};
		},

	}
}
</script>

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