<template>
  <div class="amap-shop-location">
		<div id="container" style="width:100%; height:100%"></div>
	</div>
</template>
<script>
import AMap from 'AMap'
export default {
  name: "ShopLcation",
  props: {
		'mapCenter': {
			type: Object,
			default: {
				lng: 116.397428,
				lat: 39.90923,
				address: ''
			}
		},
		
		'zoom': {
			type: [String, Number],
			default: 10
		},
		'draggable': {
			type: Boolean,
			default: true
		}
	},
  data() {
    return {
			aMap: null,
			pointResult: {
				lng: 119.275254,
        		lat: 26.028928,
				address: ''
			}
		};
  },
	mounted() {
		this.initMap()
	},
	methods: {
		initMap() {
			this.pointResult['lng'] =  this.mapCenter.lng
			this.pointResult['lat'] =  this.mapCenter.lat
			this.aMap = new AMap.Map('container', {
				center: [this.mapCenter.lng, this.mapCenter.lat],
				resizeEnable: true,
				zoom: this.zoom
			})

			var marker = new AMap.Marker({
					position: this.aMap.getCenter(),
					icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
					offset: new AMap.Pixel(-13, -30),
					// 设置是否可以拖拽
					draggable: this.draggable,
					cursor: 'move',
					// 设置拖拽效果
					raiseOnDrag: false
			});
			if (this.draggable) {
				marker.on('dragging', this.showInfoM);
				marker.on('mouseout', this.showInfoOut);
			}
			marker.setMap(this.aMap);
		},
		getPositionByLonLats(lng, lat) {
			var _this = this
            // console.log("经度："+lng+"纬度"+lat);
            var lnglatXY = [lng, lat];// 地图上所标点的坐标
            AMap.service('AMap.Geocoder', function() {// 回调函数
                var geocoder = new AMap.Geocoder({});
                geocoder.getAddress(lnglatXY, function(status, result) {
                    if (status === 'complete' && result.info === 'OK') {
                        // console.log(result.regeocode.formattedAddress);
                        var address = result.regeocode.formattedAddress;
						_this.pointResult.address = address
                    }
					_this.$emit("mapEvent", _this.pointResult)
                });
            });
        },
		showInfoOut(e) {
			// 当点标注失去鼠标焦点的时候就执行return 数据
			this.getPositionByLonLats(this.pointResult['lng'], this.pointResult['lat'])
			// this.$emit("")
		},
		showInfoM(e) {
			this.pointResult['lat'] = e.lnglat.lat
			this.pointResult['lng'] = e.lnglat.lng
		}
	}
};
</script>
<style lang="scss">
.amap-shop-location {
	.amap-marker:first-child .amap-icon img {
			width: 25px;
			height: 34px;
	}
}
</style>