VUE中使用腾讯地图JavaScript API的方法

今天在使用VUE的时候使用到腾讯地图，方法如下：

<template>
    <Row>
        <Col span="16">
            <div id="container"></div>
        </Col>
        <Col span="8">col-12</Col>
    </Row>

</template>
<script>
    import { txMap } from '@/libs/txMap'
    export default {
        name: 'map',
        data () {
            return {
                key:'G6EBZ-P7JHX-GQ244-ZM7XW-IGYZT-CLBSF',
                avatarList: []
            }
        },

        methods: {
            initMap() {
                //定义地图中心点坐标
                var center=new TMap.LatLng(39.984120,116.307484)
                //定义map变量，调用 TMap.Map() 构造函数创建地图
                var map = new TMap.Map(document.getElementById('container'), {
                    center: center,//设置地图中心点坐标
                    zoom:17.2,   //设置地图缩放级别
                });
            },
            loadScript() {
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.src = "https://map.qq.com/api/gljs?v=1.exp&key="+this.key+"&callback=init";
            script.onload = script.onreadystatechange = () => {
                if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete" ) {
                    this.initMap();
                    script.onload = script.onreadystatechange = null;
                }
            };
            document.body.appendChild(script);
            }
        },
        mounted () {
            this.loadScript();
        }
    }
</script>
<style lang="stylus">
#container {
    min-width:600px;
    min-height:367px;
}
</style>