一、理解騰訊地圖于小程序的作用

要想在小程序上使用騰訊地圖，就要先去理解騰訊地圖是在做什么

map
地圖。該組件是原生組件，使用時請注意相關限制。 個性化地圖能力可在小程序后臺“設置-開發者工具-騰訊位置服務”申請開通。 設置subkey后，小程序內的地圖組件均會使用該底圖效果，底圖場景的切換會在后續版本提供。

首先來看一下官方對原生地圖map的介紹，坑從何而起，坑從不認真看文檔開始
這里標注了幾個重點詞匯：

1. 個性化地圖
2. 設置subkey
3. 地圖場景切換

由此可以得出結論：

1. 騰訊地圖只是在微信小程序原生地圖的基礎上使用的，其作用只是輔助，一是更改小程序地圖的樣式，二是為小程序地圖提供數據計算
2. 想要自己在騰訊地圖官網上選中的地圖樣式能夠生效，需要設置subkey
3. 小程序目前不支持多樣式切換

二、實踐

1. 申請密鑰key

首先要在騰訊地圖官網注冊一個key
地址：https://lbs.qq.com/console/user_info.html

一路傻瓜式申請下來，可以馬上得到一個騰訊地圖的密鑰key
騰訊地圖支持免費申請key，前提是不能商用，且用量有限制，每日萬次請求
這里有一個坑點，小程序的key需要勾選

否則在使用的時候會報錯

2. 選擇地圖樣式

這里以黑色圖層為例

3. 開碼

官網有完整的實例代碼，照步驟拷貝 https://lbs.qq.com/qqmap_wx_jssdk/index.html

調試前需要去微信小程序后臺設置域名，如下

最終代碼如下：
注：subkey一定要寫，否則樣式無效

<map id="myMap" class="maMap" subkey="xxxx-xxxx-xxxx-xxxx-xxxx-xxxx"/>

// 引入SDK核心類
var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({
  onLoad: function () {
    // 實例化API核心類
    qqmapsdk = new QQMapWX({
      key: 'xxxx-xxxx-xxxx-xxxx-xxxx-xxxx'
    });
    this.mapCtx = wx.createMapContext('myMap')
  }
})

設置全屏

page {
  height: 100%;
  width: 100%;
}
.maMap{
  height: 100%;
  width: 100%;
}

最后還有一個坑，IDE工具當前不支持查看地圖樣式（官方文檔中也有提到），需要用手機查看
點擊預覽生成二維碼

最終結果：