一、前言

半年前，我發(fā)布過一篇介紹：Compose里面如何使用地圖，比如高德地圖 的文章，原本是沒有想造什么輪子的??

閑來無事，有一天看到了評論區(qū)留言讓我把源碼地址分享出來，我感覺我太懶了，后來忘記了，就連自己在別的市場上的app都停更一年多了，這一次是為了大家更好的摸魚寫的，絕對不是為了我自己更好的摸魚。

在某個陽光明媚的早上，無意間刷到google的map-compose，看了下挺不錯的，那就站在巨人的肩膀上，🤔我沉思了下：

國內(nèi)4大地圖平臺，我想換到別的平臺，還得寫不少東西，那我就參考google-map-compose造個輪子吧，為了更便捷的換地圖 (說錯了，是為了大家更好的摸魚)

目前輪子進(jìn)展，文章末尾有倉庫源碼地址，記得Star哦，持續(xù)更新中...

• 高德地圖 → 1.0.0
• 騰訊地圖 → 1.0.0
• 百度地圖 → 實現(xiàn)中...
• 花瓣地圖(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相關(guān)的設(shè)置的數(shù)據(jù)類
MapProperties：可在地圖上修改的屬性的數(shù)據(jù)類

---

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

---

// 騰訊地圖
TXMap(modifier = Modifier.fillMaxSize(),properties = MapProperties(...),uiSettings = MapUiSettings(...)
)

3、移動地圖相機(jī)

在圖可組合項，我們提供 CameraPositionState 來控制地圖相機(jī)

CameraPositionState：控制和觀察地圖的相機(jī)狀態(tài)

---

高德地圖

// 高德地圖
val cameraPosState = rememberCameraPositionState()
val scope = rememberCoroutineScope()
GDMap(modifier = Modifier.fillMaxSize(),// 默認(rèn)提供的位置在：天安門cameraPositionState = cameraPosState
)
Button(onClick = {scope.launch {cameraPosState.animate(CameraUpdateFactory.newLatLngZoom(LatLng(40.186009,116.400088),13F))}
}){Text(text = "移動地圖相機(jī)")
}

---

騰訊地圖：

// 騰訊地圖
val cameraPosState = rememberCameraPositionState()
val scope = rememberCoroutineScope()
TXMap(modifier = Modifier.fillMaxSize(),// 默認(rèn)提供的位置在：天安門cameraPositionState = cameraPosState
)
Button(onClick = {scope.launch {cameraPosState.animate(CameraUpdateFactory.newLatLngZoom(LatLng(40.186009,116.400088),13F))}
}){Text(text = "移動地圖相機(jī)")
}

4、已支持的覆蓋物

高德地圖	騰訊地圖
Arc、Circle、ClusterOverlay、GroundOverlay、Marker、MovingPointOverlay、MultiPointOverlay、OpenGLOverlay、Polygon、Polyline、RoutePlanOverlay、TileOverlay	Arc、Circle、ClusterOverlay、GroundOverlay、Marker、MovingPointOverlay、Polygon、Polyline、TileOverlay

以上覆蓋物均有對應(yīng)實現(xiàn)的示例程序。

高德地圖見：sample-gaode
騰訊地圖見：sample-tencent

下面是示例的演示效果：

5、自定義Marker覆蓋物的InfoWindow

提供2中修改Marker的InfoWindow :

MarkerInfoWindowContent：只填充子視圖，不修改默認(rèn)InfoWindow窗口背景
MarkerInfoWindow：完全定制InfoWindow窗口及內(nèi)容

// 只修改內(nèi)容，不修改容器
MarkerInfoWindowContent(//...title = "我是title",snippet = "我是snippet"
) { marker ->Column {Text(marker.title ?: "", color = Color.Green)Text(marker.snippet ?: "", color = Color.Red)}
}// 修改容器及內(nèi)容
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 {// 根據(jù)自己項目情況，選擇下面其中一種地圖// 高德地圖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哦，持續(xù)更新中...