第一步：申请密钥
登录腾讯位置服务官网：
点击右上角 控制台 => 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对象，试了下居然成功了= =
