原本是用別人用canvas畫的熱力圖的https://github.com/rover95/wxapp-heatmap，但是問題有點多，熱力圖的顏色，卡頓、疊加、渲染失敗等，所以就棄用了，也找了好久，好像大家都沒有更好的提議，自己也想到的一個方法就是通過webview來解決這個問題，為了驗證我的這個做法，是不是普遍的做法，在微信開發者社區找了一會，確實有些小伙伴是這樣做的，之后就下手了，下面簡單描述一下

1、使用web-view組件，最好是在后面加上一個生成隨機數，因為我發現有時候一直緩存頁面，無法更新，太難了

<web-view src="https://自己的服務器的地址/#/heatmap?serviceAreaId={{serviceAreaId}}&random={{Math.ceil(Math.random()*10)}}"></web-view>

2、h5要調騰訊地圖的熱力圖，不要忘了去騰訊地圖位置服務添加一個應用喲，生成之后就可以在html中引入這個script了

https://map.qq.com/api/gljs?v=1.exp&key=騰訊地圖位置服務后臺自己生成的key&libraries=visualization

#騰訊位置服務熱力圖示例地址

https://lbs.qq.com/webApi/visualizationApi/visualizationGuide/visualizationHeat

#騰訊位置服務自定義圖層，自定義圖層的貼圖的點位使用的是右上角(東北方位)和左下角(西南方位)

https://lbs.qq.com/javascript_gl/doc/imageGroundLayer.html

#騰訊位置服務地圖打點，這個功能用到吐了，好多項目都用到了。。

https://lbs.qq.com/webDemoCenter/glAPI/glMarker/sampleMarker

?

#圖一

?

總結

以上是生活随笔為你收集整理的小程序开发(10)-之热力图解决方案、手绘图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。