vue引入使用腾讯地图JavaScript API GL

1.不知道为什么

<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>

这种方式引入js无效，不加载js文件。，于是改成官方的第二种引入方式。

2.在官方的例子上再改下代码，等js加载完成后再去初始化地图，不然会报TMap不存在。

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

<style scoped>
  #container{
    /*地图(容器)显示大小*/
    width:1200px;
    height:400px;
  }
</style>

<script>
export default {
  name: 'tencentmap',
  data () {
    return {

    }
  },
    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,   //设置地图缩放级别
              pitch: 43.5,  //设置俯仰角
              rotation: 45    //设置地图旋转角度
          });
        },
        loadScript() {
          var script = document.createElement("script");
          script.type = "text/javascript";
          script.src = "https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&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>