当前位置: 首页 > news >正文

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

一、前言

半年前,我发布过一篇介绍: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、配置地图

在图可组合项,我们提供 MapUiSettingsMapProperties 配置地图

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中修改MarkerInfoWindow :

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哦,持续更新中...

相关文章:

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

一、前言 半年前&#xff0c;我发布过一篇介绍&#xff1a;Compose里面如何使用地图&#xff0c;比如高德地图 的文章&#xff0c;原本是没有想造什么轮子的✍️ 闲来无事&#xff0c;有一天看到了评论区留言让我把源码地址分享出来&#xff0c;我感觉我太懒了&#xff0c;后来…...

STM32之SPI

SPISPI介绍SPI是串行外设接口(Serial Peripherallnterface)的缩写&#xff0c;是一种高速的&#xff0c;全双工&#xff0c;同步的通信总线&#xff0c;并且在芯片的管脚上只占用四根线&#xff0c;节约了芯片的管脚&#xff0c;同时为PCB的布局上节省空间&#xff0c;提供方便…...

02 深度学习环境搭建

1、查看对应版本关系 详细见&#xff1a;https://blog.csdn.net/qq_41946216/article/details/129476095?spm1001.2014.3001.5501此案例环境使用 CUDA 11.7、Pytouch1.12.1、Miniconda3_py38(含Python3.8) 2. 安装Anaconda 或 Miniconda 本案例重点一为Miniconda准 2.1 安…...

PHP导入大量CSV数据的方法分享

/** * @description 迭代器读取csv文件 * @param $strCsvPath * @return \Generator */ public static function readPathCsvFile($strCsvPath) { if ($handle = fopen($strCsvPath, r)) { while (!feof($handle)) { yield fgetcsv($handle); } …...

代码看不懂?ChatGPT 帮你解释,详细到爆!

偷个懒&#xff0c;用ChatGPT 帮我写段生物信息代码如果 ChatGPT 给出的的代码不太完善&#xff0c;如何请他一步步改好&#xff1f;网上看到一段代码&#xff0c;不知道是什么含义&#xff1f;输入 ChatGPT 帮我们解释下。生信宝典 1: 下面是一段 Linux 代码&#xff0c;请帮…...

【MyBatis】篇三.自定义映射resultMap和动态SQL

MyBatis整理 篇一.MyBatis环境搭建与增删改查 篇二.MyBatis查询与特殊SQL 篇三.自定义映射resultMap和动态SQL 篇四.MyBatis缓存和逆向工程 文章目录1、自定义映射P1:测试数据准备P2:字段和属性的映射关系P3:多对一的映射关系P4:一对多的映射关系2、动态SQL2.1 IF标签2.2 w…...

什么是API?(详细解说)

编程资料时经常会看到API这个名词&#xff0c;网上各种高大上的解释估计放倒了一批初学者。初学者看到下面这一段话可能就有点头痛了。 API&#xff08;Application Programming Interface,应用程序编程接口&#xff09;是一些预先定义的函数&#xff0c;目的是提供应用程序与开…...

比cat更好用的命令!

大家好&#xff0c;我是良许。 作为程序员&#xff0c;大家一定对 cat 这个命令不陌生。它主要的功能就是用来显示文本文件的具体内容。 但 cat 命令两个很重大的缺陷&#xff1a;1. 不能语法高亮输出&#xff1b;2. 文本太长的话无法翻页输出。正是这两个不足&#xff0c;使…...

MySQL、HBase、ElasticSearch三者对比

1、概念介绍 MySQL&#xff1a;关系型数据库&#xff0c;主要面向OLTP&#xff0c;支持事务&#xff0c;支持二级索引&#xff0c;支持sql&#xff0c;支持主从、Group Replication架构模型&#xff08;本文全部以Innodb为例&#xff0c;不涉及别的存储引擎&#xff09;。 HBas…...

Vue+ElementUI+Vuex购物车

最完整最能理解的Vuex版本的购物车购物车是最经典的小案例。Vuex代码&#xff1a;import Vue from vue import Vuex from vuex import $http from ../request/http Vue.use(Vuex)const store new Vuex.Store({state:{shopList:[],},mutations:{setShopCarList(state,payload)…...

Android 录屏 实现

https://lixiaogang03.github.io/2021/11/02/Android-%E5%BD%95%E5%B1%8F/ https://xie.infoq.cn/article/dd40cd5d753c896225063f696 视频地址&#xff1a; https://time.geekbang.org/dailylesson/detail/100056832 概述 在视频会议、线上课堂、游戏直播等场景下&#x…...

【CSAPP】家庭作业2.55~2.76

文章目录2.55*2.56*2.57*2.58**2.59**2.60**位级整数编码规则2.61**2.62***2.63***2.64*2.65****2.66***2.67**2.68**2.69***2.70**2.71*2.72**2.73**2.74**2.75***2.76*2.55* 问&#xff1a;在你能访问的不同的机器上&#xff0c;编译show_bytes.c并运行代码&#xff0c;确定…...

Python操作MySQL数据库详细案例

Python操作MySQL数据库详细案例一、前言二、数据准备三、建立数据库四、处理和上传数据五、下载数据六、完整项目数据和代码一、前言 本文通过案例讲解如何使用Python操作MySQL数据库。具体任务为&#xff1a;假设你已经了解MySQL和知识图谱标注工具Brat&#xff0c;将Brat标注…...

MicroBlaze系列教程(8):AXI_CAN的使用

文章目录 @[toc]CAN总线概述AXI_CAN简介MicroBlaze硬件配置常用函数使用示例波形实测参考资料工程下载本文是Xilinx MicroBlaze系列教程的第8篇文章。 CAN总线概述 **CAN(Controller Area Network)**是 ISO 国际标准化的串行通信协议,是由德国博世(BOSCH)公司在20世纪80年代…...

网络安全领域中八大类CISP证书

CISP​注册信息安全专业人员 注册信息安全专业人员&#xff08;Certified Information Security Professional&#xff09;&#xff0c;是经中国信息安全产品测评认证中心实施的国家认证&#xff0c;对信息安全人员执业资质的认可。该证书是面向信息安全企业、信息安全咨询服务…...

stm32学习笔记-5EXIT外部中断

5 EXIT外部中断 [toc] 注&#xff1a;笔记主要参考B站 江科大自化协 教学视频“STM32入门教程-2023持续更新中”。 注&#xff1a;工程及代码文件放在了本人的Github仓库。 5.1 STM32中断系统 图5-1 中断及中断嵌套示意图 中断 是指在主程序运行过程中&#xff0c;出现了特定…...

MySQL Workbench 图形化界面工具

Workbench 介绍 MySQL官方提供了一款免费的图形工具——MySQL Workbench&#xff0c;它是一款功能强大且易于使用的数据库设计、管理和开发工具&#xff0c;总之&#xff0c;MySQL Workbench是一款非常好用的MySQL图形工具&#xff0c;可以满足大多数MySQL用户的需求。 目录 W…...

雪花算法(SnowFlake)

简介现在的服务基本是分布式、微服务形式的&#xff0c;而且大数据量也导致分库分表的产生&#xff0c;对于水平分表就需要保证表中 id 的全局唯一性。对于 MySQL 而言&#xff0c;一个表中的主键 id 一般使用自增的方式&#xff0c;但是如果进行水平分表之后&#xff0c;多个表…...

Linux防火墙

一、Linux防火墙Linux的防火墙体系主要在网络层&#xff0c;针对TCP/IP数据包实施过滤和限制&#xff0c;属于典型的包过滤防火墙&#xff08;或称为网络层防火墙&#xff09;。Linux系统的防火墙体系基于内核编码实现&#xff0c;具有非常稳定的性能和极高的效率&#xff0c;因…...

网络安全系列-四十七: IP协议号大全

IP协议号列表 这是用在IPv4头部和IPv6头部的下一首部域的IP协议号列表。 十进制十六进制关键字协议引用00x00HOPOPTIPv6逐跳选项RFC 246010x01ICMP互联网控制消息协议(ICMP)RFC 79220x02IGMP...

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端&#xff0c;它允许HTTP与Elasticsearch 集群通信&#xff0c;而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级&#xff…...

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

C++.OpenGL (10/64)基础光照(Basic Lighting)

基础光照(Basic Lighting) 冯氏光照模型(Phong Lighting Model) #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

uniapp中使用aixos 报错

问题&#xff1a; 在uniapp中使用aixos&#xff0c;运行后报如下错误&#xff1a; AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...

Reasoning over Uncertain Text by Generative Large Language Models

https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达,从日常对话到特定领域的文档(例如医学文档)(Heritage 2013;Landmark、Gulbrandsen 和 Svenevei…...

C++.OpenGL (14/64)多光源(Multiple Lights)

多光源(Multiple Lights) 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...

springboot整合VUE之在线教育管理系统简介

可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生&#xff0c;小白用户&#xff0c;想学习知识的 有点基础&#xff0c;想要通过项…...

使用Spring AI和MCP协议构建图片搜索服务

目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式&#xff08;本地调用&#xff09; SSE模式&#xff08;远程调用&#xff09; 4. 注册工具提…...

Linux nano命令的基本使用

参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时&#xff0c;显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...