vue项目中使用天地图

---

一、申请key

链接: http://lbs.tianditu.gov.cn/.
登陆网址，注册账号后点击控制台。

创建新应用，并填写好信息，就可以在应用管理表格里看到生成的key。我是pc端项目，应用类型选择了浏览器。

二、代码部分

1.静态引入

在index.html内引入，对应的key修改成自己申请的。

<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=你的key"></script>

2.创建容器

创建指定宽高的div容器，设置id：

<template>
  <div>
    <div id="divwxMap" class="divwxMap" style=" width: 100%;height: 100vh;"></div>
  </div>
</template>

3.创建基础地图

代码如下：

	mounted() {
   
      this.initwxMap();
    },
    methods: {
   
      // 初始化天地图
      initwxMap() {
   
        // vue项目需要先声明 T = window.T，不然后面无法获取到。
        var T = window.T;
        this.wxMap = new T.Map