一、前语

半年前，我发布过一篇介绍：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哦，继续更新中...

---

本文正在参加「金石计划」