<template>
    <div class="amap-page-container">
        <el-amap vid="amapDemo" :zoom="zoom" :center="center" ></el-amap>
    </div>
</template>

<style>
    .amap-page-container {
        height: 100%;
    }
</style>
<script>

    //import VueAMap from '@/utils/VamapLoad.ts';
    import VueAMap from 'vue-amap';
    import "@/utils/directive.js";
    import {
        Icon
    } from "element-ui";
    import { Component, Vue, Provide, Prop, Watch } from "vue-property-decorator";

    Vue.use(VueAMap);

    VueAMap.initAMapApiLoader({

        // 高德的keye

        key: 'cb087c0fb3b8bc56a4af064630495bb9',
        uiVersion: '1.0.11' ,// 版本号
        // 插件集合
        plugin: ['AMap.Geocoder','AMap.Autocomplete','AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.Geolocation','AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
        // 高德 sdk 版本，默认为 1.4.4

        v: '1.4.4'

    });
    //    import { AMapManager } from 'vue-amap';
    // import { AMap } from 'vue-amap';
    export default {
        data () {
            return {

                zoom: 15,
                center: [117.148118, 36.660223],
                markers: [
                    {
                        position: [117.148118, 36.660223],
                        events: {
                            click: () => {
                            },
                            dragend: (e) => {
                                console.log('---event---: dragend')
                                this.markers[0].position = [e.lnglat.lng, e.lnglat.lat];
                            }
                        },
                        visible: true,
                            draggable: false,
                            template: '<span>1</span>',
                    }
        ]
        }
        },
        methods: {
            getMap() {
                // gaode map instance
                console.log(AMapManager._map);
                alert('click text');
            }
        }
    };
</script>