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

一、前言

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

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

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

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

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

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

二、用法

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：可在地图上修改的属性的数据类

高德地图

---

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

腾讯地图

---

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

---

// 百度地图
BDMap(
    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	Arc、Circle、ClusterOverlay、GroundOverlay、Marker、MultiPointOverlay、Polygon、Polyline、TileOverlay、RoutePlanOverlay、TextOverlay、TraceOverlay、BM3DBuildOverlay、BM3DModelOverlay、BM3DPrismOverlay

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

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

下面是示例的演示效果：

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>'      
  // 百度地图
  implementation 'io.github.TheMelody:baidu_compose:<version>' 
}

渲染高德地图

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

渲染腾讯地图

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

渲染百度地图

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

---

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