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>