2.4 地圖組件和畫布組件

地圖組件和畫布組件是非常重要的兩個組件，尤其是畫布組件，市場中的大量小程序應用都是基于畫布組件制作的。畫布組件雖然在小程序剛推出的時候非常難用，甚至出現了大量的bug，但是對圖片處理和動畫繪制而言，Canvas組件是必須要使用的，也是唯一能使用的。

2.4.1 地圖組件：map

和Camera組件、Canvas組件一樣，map組件同樣屬于原生組件，默認會出現在所有的普通組件上方。當然，由于蘋果方面對地理位置等信息的使用要求，現在要獲得用戶的位置信息需要用戶同意。

相對于原生地圖組件而言，騰訊提供的地圖元素并不是很多，只是地圖信息的顯示和一個到多個標記點的標記功能。更加個性化的元素不能自主添加在地圖上，需要使用個性化地圖才可以使用個性化的地圖服務（該原生個性化地圖服務不能在開發者工具上調試）。

原生地圖組件（map組件）支持的屬性很多，如表2-9所示。

表2-9 map組件屬性

注意：個性化地圖能力可在小程序后臺“設置→開發者工具→騰訊位置服務”中申請開通。這些新功能都是基于騰訊位置服務的，需要使用相關的授權和進行手機號綁定等操作，而后直接使用小程序的subkey配置即可。詳細的申請和文檔可以查看如下網址：https://lbs.qq.com/product/miniapp/guide/。

2.4.2 畫布組件：Canvas和API：wx.createCanvasContext

畫布組件是一個非常有用的組件，也可能是所有的原生組件中使用最多的組件之一。和HTML中的Canvas相比，雖然兩者的共同點很多，但是大部分API方法依舊不通用，這意味著，大量HTML中提供的Canvas庫并不能在小程序中使用，而小程序中的Canvas提供的API相對原始，且在使用中可能會出現少量bug—請注意。

注意：Canvas同樣屬于原生組件，使用時會覆蓋在其他組件上，而且在測試時，cover組件可能在Canvas從隱藏到顯示時出現無法覆蓋Canvas的情況。

Canvas本身的引用非常簡單，只需要使用如下代碼就可以應用在整個頁面中。

＜canvas style="width: 300px; height: 200px;" canvas-id="firstCanvas"＞＜/canvas＞

canvas-id是必須配置的，否則在下方的JavaScript代碼中無法獲得該組件的實例。同樣，canvas可以指定其寬度和高度，并且設置其是否處于隱藏狀態。

該Canvas的繪圖上下文CanvasContext對象是通過Canvas的API wx.createCanvasContext獲得的。獲得上述代碼的上下文可直接使用如下代碼。

const canvas = wx.createCanvasContext（'firstCanvas'）

在畫布中繪制圖形也非常簡單。在獲取上下文之后調用繪圖方法，然后直接調用draw（）方法繪制，如下所示。

const ctx = wx.createCanvasContext（'myCanvas'）

ctx.setFillStyle（'red'）
ctx.fillRect（10，10，150，100）
ctx.draw（）
ctx.fillRect（50，50，150，100）
ctx.draw（true）

這樣就繪制了兩個重疊的矩形，如圖2-8所示。Canvas支持的繪制方法如表2-10所示。

圖2-8 繪制Canvas

表2-10 Canvas支持的繪制方法

續表

續表

小程序的Canvas為我們提供了基礎的繪圖方式，雖然看上去只能繪制線、面、路徑等，但其實所有復雜的圖像和圖形都是這些基礎的元素組合拼接而成的。如何合理應用這些方法，是開發者應當考量的。

注意：Canvas的實例請參考第8章。