在vue中使用腾讯地图

第一步：申请密钥

登录腾讯位置服务官网：

点击右上角 控制台 => key管理 => 创建新密钥 (不需要再进入key设置，只要生成了密钥就可以了)

第二步：引入文件

找到public目录，在index.html中引入下面这句话，这里要填写自己刚才申请的key

<script src="https://map.qq.com/api/gljs?v=1.exp&key=NAOBZ-*********-KJRLY-UJX5T-5OBPJ"></script>

第三步：使用地图

在要使用的vue组件中设置一个容器，一定要有宽高，我为了方便演示就直接在app.vue里使用了，完整的app.vue代码如下

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

<script>

export default {
  data () {
    return {
    }
  },
  methods: {
    // 地图初始化函数，本例取名为init，开发者可根据实际情况定义
    initMap () {
    // 定义地图中心点坐标
      var center = new window.TMap.LatLng(39.984120, 116.307484)
      // 定义map变量，调用 TMap.Map() 构造函数创建地图
      var map = new window.TMap.Map(document.getElementById('app'), {
        center: center, // 设置地图中心点坐标
        zoom: 17.2, // 设置地图缩放级别
        pitch: 43.5, // 设置俯仰角
        rotation: 45 // 设置地图旋转角度
      })
      console.log(map)
      console.log(window)
    }
  },
  mounted () {
    this.initMap()
  }
}
</script>
<style>

</style>

这样一个腾讯地图就弄好了，是不是超级简单呢？看一下效果

说一下遇到的坑，腾讯地图给的开发文档里是这么写的

如果你像我一样复制粘贴了，那就会报这么一个错误，他会告诉你TMap没有定义

在网上看了好多这个问题的处理方法，都是qq.Tmap... 虽然看不懂为啥这么写（如果有懂的麻烦告知下，看他们这样写好像可以运行），但是我也试了下，结果依然报错。。。

机缘巧合下输出了一下window，发现window下有一个TMap对象，试了下居然成功了= =