WeChat Mini Program (Components – Map + Canvas)
This section mainly introduces the map component map and the canvas component canvas.
Because there are too many component attributes, many methods have not been perfected, so we mainly explain the common attributes and methods. If you meet the needs of personalized map projects in later development, you can refer to the official documents to configure them one by one.
Map component map
Map component <map></map>
The personalized map capability can be activated in the background of the mini program "Development-Developer Tools-Tencent Location Service". For details, see https://lbs.qq.com/product/miniapp/guide "Mini Program Personalized Map User Guide" .
Register according to the guide.
The length unit of the component attribute is px by default. Since 2.4.0, the input unit (rpx/px) is supported.
Case:
Click the My Location option, jump to the map page, and locate the coordinates of the current location. 
Online map latitude and longitude pickup query: http://www.gpsspg.com/maps.htm
Map page 
If you want to locate the current location, you need to use the location API, namely wx.getLocation(), which will be introduced later in the course.
Canvas component canvas
Canvas component canvas-easy to understand
Note:
①The default width of the canvas label is 300px, and the height is 150px.
②Avoid setting too large width and height, and there will be crash problems under Android
Canvas component canvas component
related api: wx.createCanvasContext canvas context
Note:
①The default width of the canvas tag is 300px, and the height is 150px.
②The canvas-id in the same page cannot be repeated. If you use a canvas-id that has already appeared, the canvas corresponding to the canvas tag will be hidden and no longer work properly. ③Avoid setting too
much Large width and height, there will be crash problems under Android (that is, crashing and freezing)
Canvas component canvas-basic properties
Canvas component canvas-event property
Canvas component canvas case:
