我用Compose做了一个地图轮子OmniMap

一、前言

半年前，我发布过一篇介绍：Compose里面如何使用地图，比如高德地图 的文章，原本是没有想造什么轮子的✍️

闲来无事，有一天看到了评论区留言让我把源码地址分享出来，我感觉我太懒了，后来忘记了，就连自己在别的市场上的app都停更一年多了，这一次是为了大家更好的摸鱼写的，绝对不是为了我自己更好的摸鱼。

在某个阳光明媚的早上，无意间刷到google的map-compose，看了下挺不错的，那就站在巨人的肩膀上，🤔我沉思了下：

国内4大地图平台，我想换到别的平台，还得写不少东西，那我就参考google-map-compose造个轮子吧，为了更便捷的换地图 (说错了，是为了大家更好的摸鱼)

目前轮子进展，文章末尾有仓库源码地址，记得Star哦，持续更新中...

• 高德地图 → 1.0.0
• 腾讯地图 → 1.0.0
• 百度地图 → 实现中...
• 花瓣地图(Android 7.0+) → 未开始
• Google地图 → 未开始

二、用法

1、添加地图

我们在OmniMap中提供了：GDMap，TXMap，BDMap，HWMap，GGMap 可组合项来渲染我们的地图MapView

渲染高德地图

GDMap(modifier = Modifier.fillMaxSize()){ ... }

渲染腾讯地图

TXMap(modifier = Modifier.fillMaxSize()){ ... }

2、配置地图

在图可组合项，我们提供 MapUiSettings和MapProperties 配置地图

MapUiSettings：与UI相关的设置的数据类
MapProperties：可在地图上修改的属性的数据类

高德地图

---

// 高德地图
GDMap(modifier = Modifier.fillMaxSize(),properties = MapProperties(...),uiSettings = MapUiSettings(...)
)

腾讯地图

---

// 腾讯地图
TXMap(modifier = Modifier.fillMaxSize(),properties = MapProperties(...),uiSettings = MapUiSettings(...)
)

3、移动地图相机

在图可组合项，我们提供 CameraPositionState 来控制地图相机

CameraPositionState：控制和观察地图的相机状态

---

高德地图

// 高德地图
val cameraPosState = rememberCameraPositionState()
val scope = rememberCoroutineScope()
GDMap(modifier = Modifier.fillMaxSize(),// 默认提供的位置在：天安门cameraPositionState = cameraPosState
)
Button(onClick = {scope.launch {cameraPosState.animate(CameraUpdateFactory.newLatLngZoom(LatLng(40.186009,116.400088),13F))}
}){Text(text = "移动地图相机")
}

---

腾讯地图：

// 腾讯地图
val cameraPosState = rememberCameraPositionState()
val scope = rememberCoroutineScope()
TXMap(modifier = Modifier.fillMaxSize(),// 默认提供的位置在：天安门cameraPositionState = cameraPosState
)
Button(onClick = {scope.launch {cameraPosState.animate(CameraUpdateFactory.newLatLngZoom(LatLng(40.186009,116.400088),13F))}
}){Text(text = "移动地图相机")
}

4、已支持的覆盖物

高德地图	腾讯地图
Arc、Circle、ClusterOverlay、GroundOverlay、Marker、MovingPointOverlay、MultiPointOverlay、OpenGLOverlay、Polygon、Polyline、RoutePlanOverlay、TileOverlay	Arc、Circle、ClusterOverlay、GroundOverlay、Marker、MovingPointOverlay、Polygon、Polyline、TileOverlay

以上覆盖物均有对应实现的示例程序。

高德地图见：sample-gaode
腾讯地图见：sample-tencent

下面是示例的演示效果：

5、自定义Marker覆盖物的InfoWindow

提供2中修改Marker的InfoWindow :

MarkerInfoWindowContent：只填充子视图，不修改默认InfoWindow窗口背景
MarkerInfoWindow：完全定制InfoWindow窗口及内容

// 只修改内容，不修改容器
MarkerInfoWindowContent(//...title = "我是title",snippet = "我是snippet"
) { marker ->Column {Text(marker.title ?: "", color = Color.Green)Text(marker.snippet ?: "", color = Color.Red)}
}// 修改容器及内容
MarkerInfoWindow(//...snippet = "我是一个卖报的小画家(自定义InfoWindow)"
) { marker ->Card(modifier = Modifier.requiredSizeIn(maxWidth = 88.dp, minHeight = 66.dp)) {Text(modifier = Modifier.padding(4.dp),text = marker.snippet ?: "", color = Color.Red)}
}

3、集成

repositories {maven { url 'https://mirrors.tencent.com/nexus/repository/maven-public/' }
}dependencies {// 根据自己项目情况，选择下面其中一种地图// 高德地图implementation 'io.github.TheMelody:gd_compose:<version>'      // 腾讯地图implementation 'io.github.TheMelody:tencent_compose:<version>' 
}

渲染高德地图

GDMap(modifier = Modifier.fillMaxSize(),...){ // 这里放置已提供的地图覆盖物...
}

渲染腾讯地图

TXMap(modifier = Modifier.fillMaxSize(),...){ // 这里放置已提供的地图覆盖物...
}

---

源码地址：OmniMap-Compose，点个Star哦，持续更新中...