第一步：申請(qǐng)密鑰
登錄騰訊位置服務(wù)官網(wǎng)：
點(diǎn)擊右上角 控制臺(tái) => key管理 => 創(chuàng)建新密鑰 (不需要再進(jìn)入key設(shè)置愧口，只要生成了密鑰就可以了)
第二步：引入文件
找到public目錄杖挣，在index.html中引入下面這句話(huà)，這里要填寫(xiě)自己剛才申請(qǐng)的key
<script src="https://map.qq.com/api/gljs?v=1.exp&key=NAOBZ-*********-KJRLY-UJX5T-5OBPJ"></script>
第三步：使用地圖
在要使用的vue組件中設(shè)置一個(gè)容器疾宏，一定要有寬高碟案，我為了方便演示就直接在app.vue里使用了物臂，完整的app.vue代碼如下
<template>
<div id="app">
</div>
</template>
<script>
export default {
data () {
return {
}
},
methods: {
// 地圖初始化函數(shù)，本例取名為init卒稳，開(kāi)發(fā)者可根據(jù)實(shí)際情況定義
initMap () {
// 定義地圖中心點(diǎn)坐標(biāo)
var center = new window.TMap.LatLng(39.984120, 116.307484)
// 定義map變量蹋半，調(diào)用 TMap.Map() 構(gòu)造函數(shù)創(chuàng)建地圖
var map = new window.TMap.Map(document.getElementById('app'), {
center: center, // 設(shè)置地圖中心點(diǎn)坐標(biāo)
zoom: 17.2, // 設(shè)置地圖縮放級(jí)別
pitch: 43.5, // 設(shè)置俯仰角
rotation: 45 // 設(shè)置地圖旋轉(zhuǎn)角度
})
console.log(map)
console.log(window)
}
},
mounted () {
this.initMap()
}
}
</script>
<style>
</style>
這樣一個(gè)騰訊地圖就弄好了，是不是超級(jí)簡(jiǎn)單呢充坑？看一下效果
演示
說(shuō)一下遇到的坑减江，騰訊地圖給的開(kāi)發(fā)文檔里是這么寫(xiě)的
騰訊開(kāi)發(fā)文檔
如果你像我一樣復(fù)制粘貼了，那就會(huì)報(bào)這么一個(gè)錯(cuò)誤捻爷，他會(huì)告訴你TMap沒(méi)有定義
錯(cuò)誤
在網(wǎng)上看了好多這個(gè)問(wèn)題的處理方法辈灼，都是qq.Tmap... 雖然看不懂為啥這么寫(xiě)（如果有懂的麻煩告知下，看他們這樣寫(xiě)好像可以運(yùn)行）也榄，但是我也試了下巡莹，結(jié)果依然報(bào)錯(cuò)司志。。降宅。
機(jī)緣巧合下輸出了一下window骂远，發(fā)現(xiàn)window下有一個(gè)TMap對(duì)象，試了下居然成功了= =
