计算机网站建设和维护,网页设计风格分类,可以做网站的软件,市场营销分析案例一、前言
半年前#xff0c;我发布过一篇介绍#xff1a;Compose里面如何使用地图#xff0c;比如高德地图 的文章#xff0c;原本是没有想造什么轮子的✍️ 闲来无事#xff0c;有一天看到了评论区留言让我把源码地址分享出来#xff0c;我感觉我太懒了#xff0c;后来…一、前言
半年前我发布过一篇介绍Compose里面如何使用地图比如高德地图 的文章原本是没有想造什么轮子的✍️ 闲来无事有一天看到了评论区留言让我把源码地址分享出来我感觉我太懒了后来忘记了就连自己在别的市场上的app都停更一年多了这一次是为了大家更好的摸鱼写的绝对不是为了我自己更好的摸鱼。 在某个阳光明媚的早上无意间刷到google的map-compose看了下挺不错的那就站在巨人的肩膀上我沉思了下 国内4大地图平台我想换到别的平台还得写不少东西那我就参考google-map-compose造个轮子吧为了更便捷的换地图 (说错了是为了大家更好的摸鱼) 目前轮子进展文章末尾有仓库源码地址记得Star哦持续更新中... 高德地图 → 1.0.0 腾讯地图 → 1.0.0 百度地图 → 实现中... 花瓣地图(Android 7.0) → 未开始 Google地图 → 未开始 二、用法
1、添加地图
我们在OmniMap中提供了GDMapTXMapBDMapHWMapGGMap 可组合项来渲染我们的地图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、TileOverlayArc、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哦持续更新中...
