由于找遍全網(wǎng)都沒有使用過騰訊地圖熱力圖接口的，所以我是靠自己一個個嘗試的，所有嘗試了很多步驟才做出來，所以很多步驟可能多于，但是我也不知道拿幾個步驟才是真正實現(xiàn)熱力圖的，所以全部都寫出來，如果大家有補充的可以在評論區(qū)發(fā)言。本人水平不足，很多地方考慮不到，文章也不怎么會寫，但希望能通過文章幫到你！
1. 申請密鑰key
首先要在騰訊地圖官網(wǎng)注冊一個key
地址：騰訊位置服務(wù) - 立足生態(tài)，連接未來
我是勾選了WebServiceAPI SDK 微信小程序三個選項 然后創(chuàng)建了一個key
這個key在后面要用到很多地方
2.點擊下面的圖層編輯
?我選的是標(biāo)準(zhǔn)熱力圖，然后點擊導(dǎo)入數(shù)據(jù)
點擊下面那個下載數(shù)據(jù)模板，就會給你一個longitude、latitude、weight的xlsx 然后填完導(dǎo)入進去就好，進入就可以編輯各種東西了，如下圖所示：
各種編輯完后，發(fā)布一下
?然后就會跳轉(zhuǎn)到圖層綁定頁面：
輸入一下小程序appID 然后綁定一下圖層 提交即可?
3.然后點數(shù)據(jù)管理的我的數(shù)據(jù)
?設(shè)置一下數(shù)據(jù)權(quán)限
綁定你的key
4.然后進入這個網(wǎng)站
地址：控制臺文檔 | 騰訊位置服務(wù) (qq.com)
發(fā)布一下自己的圖層
就是調(diào)用這個URL
https://apis.map.qq.com/data_layer/v1/publish?key=xxxxxxxx&layerid=xxxxxxxxxxxx
傳入自己的key和layerid 這里的layerid的i是小寫 后面小程序里是大寫！
?這一步執(zhí)行完 圖層就應(yīng)該可以被小程序訪問了
5.微信公眾平臺小程序開發(fā)管理里設(shè)置一下request合法域名 如下
6.打開自己的小程序
首先在自己的小程序map組件里設(shè)置一下key，一定要加不然最后沒呈現(xiàn)效果
?<map? subkey="xxxxxxxxxxxxxxx">
然后調(diào)用一下微信小程序自帶的添加可視化圖層的api，地址如下：
MapContext.addVisualLayer(Object object) | 微信開放文檔 (qq.com)
然后傳入你的圖層id就可以呈現(xiàn)了，這里傳的圖層id，屬性是layerId，和上面不一樣，提醒一下
7.意外
當(dāng)然我沒有這么輕松實現(xiàn)，因為這個圖層和MapContext.addGroundOverlay添加的圖層是有沖突的，MapContext.addGroundOverlay添加的圖層會比MapContext.addVisualLayer(Object object)添加的圖層慢調(diào)用，盡管語句上Layer比Overlay靠后，Overlay還是先執(zhí)行，然后覆蓋了熱力圖導(dǎo)致沒顯示，我最后是在Overlay的回調(diào)函數(shù)里再調(diào)用MapContext.addVisualLayer，這樣就保證熱力圖在最上面了。
小程序上實現(xiàn)的效果和騰訊地圖上差異還是有的，不過也沒啥關(guān)系
接口也是不久前才出，網(wǎng)上都沒有相應(yīng)教程，騰訊地圖的官方文檔只告訴你調(diào)用MapContext.addVisualLayer。。。摸索了好久，我在自己的小程序上能實現(xiàn)，體驗版和真機調(diào)試都行，如果有其他補充的地方歡迎大家一起完善?。。。。。。?mark hidden color="red">文章來源：http://www.zghlxwxcb.cn/news/detail-496084.html
第一次寫文章樣式什么的不太好看，愿諒解。文章來源地址http://www.zghlxwxcb.cn/news/detail-496084.html
到了這里，關(guān)于微信小程序地圖組件利用騰訊地圖生成熱力圖的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
