一、前言
半年前,我发布过一篇介绍:Compose里面如何使用地图,比如高德地图 的文章,原本是没有想造什么轮子的✍️
闲来无事,有一天看到了评论区留言让我把源码地址分享出来,我感觉我太懒了,后来忘记了,就连自己在别的市场上的app都停更一年多了,这一次是为了大家更好的摸鱼写的,绝对不是为了我自己更好的摸鱼。
![](https://i-blog.csdnimg.cn/blog_migrate/67f6c3be2238ac8d7dc7985c069dc88d.gif)
在某个阳光明媚的早上,无意间刷到google的map-compose,看了下挺不错的,那就站在巨人的肩膀上,🤔我沉思了下:
国内4大地图平台,我想换到别的平台,还得写不少东西,那我就参考google-map-compose造个轮子吧,为了
更便捷
的换地图(说错了,是为了大家更好的摸鱼)
目前轮子进展,文章末尾有仓库源码地址,记得Star哦,持续更新中...
-
高德地图 → 1.0.2
-
腾讯地图 → 1.0.2
-
百度地图 → 1.0.2
-
花瓣地图(Android 7.0+) → 实现中
-
Google地图 → 未开始
![](https://i-blog.csdnimg.cn/blog_migrate/8586e7ff0b6b4cb5693c338b6125f8fe.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/50c6be2a39941e391b3e91c518b5a68c.gif)
二、用法
1、添加地图
我们在OmniMap
中提供了:GDMap
,TXMap
,BDMap
,HWMap
,GGMap
可组合项来渲染我们的地图MapView
渲染高德地图
GDMap(modifier = Modifier.fillMaxSize()){ ... }
渲染腾讯地图
TXMap(modifier = Modifier.fillMaxSize()){ ... }
渲染百度地图
BDMap(modifier = Modifier.fillMaxSize()){ ... }
2、配置地图
在图可组合项,我们提供 MapUiSettings
和MapProperties
配置地图
MapUiSettings:与UI相关的设置的数据类
MapProperties:可在地图上修改的属性的数据类
![](https://i-blog.csdnimg.cn/blog_migrate/ff250ddf29b5a2a8b6352b97ac135df5.png)
高德地图
// 高德地图
GDMap(
modifier = Modifier.fillMaxSize(),
properties = MapProperties(...),
uiSettings = MapUiSettings(...)
)
![](https://i-blog.csdnimg.cn/blog_migrate/9d018ed5cc85c4d8945b61735c41b491.png)
腾讯地图
// 腾讯地图
TXMap(
modifier = Modifier.fillMaxSize(),
properties = MapProperties(...),
uiSettings = MapUiSettings(...)
)
// 百度地图
BDMap(
modifier = Modifier.fillMaxSize(),
properties = MapProperties(...),
uiSettings = MapUiSettings(...)
)
3、移动地图相机
在图可组合项,我们提供 CameraPositionState
来控制地图相机
CameraPositionState:控制和观察地图的相机状态
![](https://i-blog.csdnimg.cn/blog_migrate/c06348e84633fad7c3ffe39fad9d7497.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/56e2f53ac65ad52fc767805f27b1a426.gif)
高德地图
// 高德地图
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 | Arc、Circle、ClusterOverlay、GroundOverlay、Marker、MultiPointOverlay、Polygon、Polyline、TileOverlay、RoutePlanOverlay、TextOverlay、TraceOverlay、BM3DBuildOverlay、BM3DModelOverlay、BM3DPrismOverlay |
以上覆盖物均有对应实现
的示例程序。
高德地图见:sample-gaode
腾讯地图见:sample-tencent
百度地图见:sample-baidu
下面是示例的演示效果:
![](https://i-blog.csdnimg.cn/blog_migrate/8586e7ff0b6b4cb5693c338b6125f8fe.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/50c6be2a39941e391b3e91c518b5a68c.gif)
5、自定义Marker覆盖物的InfoWindow
提供2中修改Marker
的InfoWindow
:
MarkerInfoWindowContent
:只填充子视图,不修改默认InfoWindow
窗口背景
MarkerInfoWindow
:完全定制InfoWindow
窗口及内容
![](https://i-blog.csdnimg.cn/blog_migrate/40b21e4bc84f287f7eed11cb20f6fee7.png)
![](https://i-blog.csdnimg.cn/blog_migrate/24e00efa285dadda26fd6fb1376fcfc8.png)
// 只修改内容,不修改容器
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>'
// 百度地图
implementation 'io.github.TheMelody:baidu_compose:<version>'
}
渲染高德地图
GDMap(modifier = Modifier.fillMaxSize(),...){
// 这里放置已提供的地图覆盖物
...
}
渲染腾讯地图
TXMap(modifier = Modifier.fillMaxSize(),...){
// 这里放置已提供的地图覆盖物
...
}
渲染百度地图
BDMap(modifier = Modifier.fillMaxSize(),...){
// 这里放置已提供的地图覆盖物
...
}
![](https://i-blog.csdnimg.cn/blog_migrate/8586e7ff0b6b4cb5693c338b6125f8fe.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/50c6be2a39941e391b3e91c518b5a68c.gif)
源码地址:OmniMap-Compose,点个Star哦,持续更新中...