vue集成高德地图

<template>
    
    <div style="width:100%; height:100%; background-color:gray; display:flex; justify-content:center; align-items:center">

        <!-- loding-icon -->
        <div v-if="false" ><i class="el-icon-loading"></i></div>

        <!-- map -->
        <div v-if="true" id="container" style="width:99.4%; height:99%;"></div>
    </div>

</template>

<script>

//点击提示的窗口
var content = [
    "<div>北京天安门广场</div>"
];

export default {
    name: 'Map',
    data() {
        return {
            flag: false,
            flagicon: true
        }
    },
    //页面加载完以后渲染
    mounted() {
        this.flag = true;
        // alert(this.flag)
        this.flagicon = false;
        
        // 创建地图实例 （必须）
        var map = new AMap.Map("container", {
            zoom: 13, //缩放级别
            center: [116.473195, 39.973253],  //经度纬度
            resizeEnable: true
        })

        //创建marke实例 （标记功能）
        var marker = new AMap.Marker({
            position: new AMap.LngLat(116.39, 39.9),  // 经纬度对象
            title: '北京'
        })

        //信息窗口 （信息窗口功能）
        var infoWindow = new AMap.InfoWindow({
            content: content.join("<br>")
        })

        //点击事件
        var clickHandler = function (e) {
            console.log('您在[' + e.lnglat.getLng() + ',' + e.lnglat.getLat() + ']的位置点击了地图!')
            infoWindow.open(map,[116.39, 39.9])
        }


        // 浏览器定位


        map.on('click', clickHandler)
        map.add(marker)
    },
    //页面创建时渲染
    created() {
        
    },
    //方法调用
    methods: {

    }
}
</script>

<style>

</style>