[[359521]]

想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區

https://harmonyos.51cto.com/#zz

大家好!歡迎您來到51CTO鴻蒙專區。我是董昱。很榮幸成為HarmonyOS系統課程開發者。

歡迎大家觀看我在51CTO中首發了我的最新免費的視頻教程《精講鴻蒙應用程序開發》，并提出寶貴的意見：

https://edu.51cto.com/course/26138.html

今天給大家介紹我自己開發的一個鴻蒙應用程序的地圖控件：TinyMap。大家先看看效果

因為論壇上傳gif動畫的大小的閑置，實際的效果比這個還要好一些，平移的時候如絲般順滑。

這個控件可以放置Google和高德的底圖，并且可以添加自定義的底圖元素(帶圖片的地理位置要素)

優勢：

• 開源，方便大家學習研究
• 超級輕量化，目前僅包含3個類，適合源碼研究和學習。
• 可高德地圖和Google地圖作為地理底圖，并且可以選擇衛星影像和矢量底圖數據。
• 可添加自定義底圖元素(Element)

部署教程：

將tinymap Module(也就是HAP)移到所需要的工程中，并且在需要調用的Module(HAP)中導入這個工程。 在build.gradle中插入以下代碼：

apply plugin: 'com.huawei.ohos.hap' 
 
... 
 
dependencies { 
 
... 
 
implementation project(':tinymap') 
 
} 

 使用說明

目前支持手勢滑動平移，還不支持手勢放大和縮小(在后期會加上這個功能)。

• zoomIn()方法：縮小地圖
• zoomOut()方法：放大地圖
• refreshMap()方法：刷新地圖
• setMapSource(TinyMap.MapSource mapSource)方法：切換底圖數據源。目前底圖數據源包括5類：

MapSource.GAODE_ROAD : 高德道路數據 
 
MapSource.GAODE_VECTOR : 高德矢量數據 
 
MapSource.GAODE_SATELLITE : 高德衛星數據 
 
MapSource.GOOGLE_VECTOR : Google矢量數據 
 
MapSource.GOOGLE_SATELLITE : Google衛星數據 

• addElement(float x, float y, int resource)方法：添加底圖元素(目前僅支持墨卡托投影坐標，后期會添加經緯度坐標方法)。例如：

addElement(12956517.35f, 4864667.87f, ResourceTable.Media_dot)​ 

這個地圖是怎么實現的呢?

我通過Component組件的Canvas畫布進行繪制的。具體大家可以看代碼，注釋啥的都有，總共也不超過1000行。

開源地址：

https://gitee.com/dongyu1009/tiny-map-for-harmony-os

如果大家感興趣，以后會給大家介紹具體的實現方法。哈哈。

©著作權歸作者和HarmonyOS技術社區共同所有，如需轉載，請注明出處，否則將追究法律責任

想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區

https://harmonyos.51cto.com/#zz