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

<script>
export default {
    props: ['coor'],
    data () {
        return {
            map: null,
        }
    },
    mounted () {
        if (this.coor) {
            this.initMap();
        }
    },
    methods: {
        initMap() {
            if (this.coor && this.coor.lat && this.coor.lng) {
                // eslint-disable-next-line no-undef
                const map = new AMap.Map('container', {
                resizeEnable: true,
                animateEnable: true,
                zoom: 16
                });
                this.map = map;
                // eslint-disable-next-line no-undef
                const marker = new AMap.Marker({
                    map: map,
                    icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
                })
                // eslint-disable-next-line no-undef
                marker.setPosition(new AMap.LngLat(this.coor.lng, this.coor.lat));
                // eslint-disable-next-line no-undef
                map.setCenter(new AMap.LngLat(this.coor.lng, this.coor.lat));
            }
        }
    },
    beforeDestroy () {
        this.map && this.map.destroy();
    },
}
</script>

<style lang="scss">
#container {
    width: 100%;
    height: 400px;
}
</style>