想了解更多内容，征文组件请访问：

和华为官方合作共建的手机上第鸿蒙技术社区

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

大家好!欢迎您来到鸿蒙专区。我是地图董昱。很荣幸成为HarmonyOS系统课程开发者。鸿蒙

欢迎大家观看我在中首发了我的个开最新免费的视频教程《精讲鸿蒙应用程序开发》，并提出宝贵的源地意见：

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技术社区共同所有，如需转载，请注明出处，否则将追究法律责任

想了解更多内容，请访问：

和华为官方合作共建的WordPress模板鸿蒙技术社区

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

(责任编辑：人工智能)