<template>
	<div class="map" id="container"></div>
</template>

<script>
export default {
	props: {
		center: {
			type: String,
			default: '重庆市',
			required: false,
		},
		zoom: {
			type: Number,
			default: 10
		},
		coor: {
			type: Object,
			default: function() {
				return {
					lat: 29.533155,
					lng: 106.504962,
				}
			}
		}
	},
	data() {
		return {
			map: null,
		}
	},
	mounted () {
		setTimeout(() => {
			this.initMap();
		}, 1000);
	},
	methods: {
		initMap() {
            const map = new AMap.Map('container', {
                resizeEnable: true,
                zoom: this.zoom,
                center: [this.coor.lng, this.coor.lat],
            });
            this.map = map;
            const scale = new AMap.Scale({
                visible: true
            });
            const toolBar = new AMap.ToolBar({
                visible: true
            });
            map.addControl(scale);
            map.addControl(toolBar);
			const marker = new AMap.Marker({
                map: map,
                icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
            });
			marker.setPosition(new AMap.LngLat(this.coor.lng, this.coor.lat));
			// map.setCenter(new AMap.LngLat(this.coor.lng, this.coor.lat));
			// map.setZoom(this.zoom);
		},
	},
	beforeDestroy () {
		this.map && this.map.destroy();
	}
}
</script>

<style lang="scss">
.map {
	width: 100%;
	height: 450px;
	min-height: 450px;
}
</style>
