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

鸿蒙 ArkUI实现地图找房效果

常用的地图找房功能,是在地图上添加区域、商圈、房源等一些自定义 marker,然后配上自己应用的一些筛选逻辑构成,在这里使用鸿蒙 ArkUI 简单实现下怎么添加区域/商圈、房源等 Marker.

1、开启地图服务

在华为开发者官网,注册应用,然后在我的项目-我的应用-ApI管理中开启地图服务Map Kit;

2、地图相关配置

在工程中entry模块的module.json5文件中配置client_id,client_id可以在项目设置 > 常规 > 应用中找到,这里可能需要配置公钥指纹,具体可以参考开发者官网。

"module": {"name": "xxxx","type": "entry","description": "xxxx","mainElement": "xxxx","deviceTypes": ['phone','tablet'],"pages": "xxxx","abilities": [],"metadata": [{"name": "client_id","value": "xxxxxx"  // 配置为获取的Client ID}]
}

3、创建地图

使用MapComponent组件创建地图,需要传递两个参数mapOptions和mapCallback,需要重写onPageShow和onPageHide两个生命周期方法,用来显示和隐藏地图。如果地图不显示的话,可以参考官网的地图不显示。

MapComponent(mapOptions: mapCommon.MapOptions, mapCallback: AsyncCallback<map.MapComponentController>)// 地图初始化参数,设置地图中心点坐标及层级this.mapOptions = {position: {target: {latitude: 39.9,longitude: 116.4},zoom: 10}};// 地图初始化的回调this.callback = async (err, mapController) => {if (!err) {// 获取地图的控制器类,用来操作地图this.mapController = mapController;this.mapEventManager = this.mapController.getEventManager();let callback = () => {console.info(this.TAG, `on-mapLoad`);}this.mapEventManager.on("mapLoad", callback);}};}// 页面每次显示时触发一次,包括路由过程、应用进入前台等场景,仅@Entry装饰的自定义组件生效onPageShow(): void {// 将地图切换到前台if (this.mapController) {this.mapController.show();}}// 页面每次隐藏时触发一次,包括路由过程、应用进入后台等场景,仅@Entry装饰的自定义组件生效onPageHide(): void {// 将地图切换到后台if (this.mapController) {this.mapController.hide();}}build() {Stack() {// 调用MapComponent组件初始化地图MapComponent({ mapOptions: this.mapOptions, mapCallback: this.callback }).width('100%').height('100%');}.height('100%')}

4、地图上显示我的位置图标

需要先动态申请定位权限,获取具体定位坐标后,通过地图操作类mapController调用setMyLocation方法设置定位坐标,animateCamera方法移动地图到定位坐标位置,可以设置缩放等级,这样就可以在地图上显示一个位置图标;

static LocationPermissions: Array<Permissions> =['ohos.permission.LOCATION', 'ohos.permission.APPROXIMATELY_LOCATION'];//开始定位startLocation() {//申请定位权限AgentUtil.requestPermissions(AgentUtil.LocationPermissions, async () => {//获取到定位权限// 启用我的位置图层,mapController为地图操作类对象,获取方式详见显示地图章节this.mapController?.setMyLocationEnabled(true);// 启用我的位置按钮this.mapController?.setMyLocationControlsEnabled(true);// 获取用户位置坐标let location = await geoLocationManager.getCurrentLocation()// 转换经纬度坐标// let wgs84LatLng = AgentUtil.wgs84LatLng(location.latitude, location.longitude)// location.latitude = wgs84LatLng.latitude// location.longitude = wgs84LatLng.longitude// 设置用户的位置this.mapController?.setMyLocation(location);setTimeout(() => {//移动地图到目标位置this.mapController?.animateCamera(map.newLatLng(location, 15))}, 100)})}

5、监听地图停止移动

当地图移动到定位坐标后,可以通过mapController.on("cameraIdle", () => {})方法,监听地图停止移动,在回调中可以做后续展示 Marker的逻辑;这里根据地图缩放等级来区分展示区域或者楼盘,后续可以继续完善,添加商圈层级,一级自己需要的业务逻辑。

 this.mapEventManager.on("cameraIdle", () => {//地图停止移动,可以执行一些操作let position = this.mapController?.getCameraPosition()let currentZoom = position?.zoom ?? 0if (currentZoom < 14) {//展示区域商圈this.addAreaMarkers()}else{//展示房源楼盘this.addHouseMarkers()}});

6、自定义 Marker

1. 自定义圆形 Marker

比如可以用来显示区域和商圈,由于 Map Kit 中添加的 Marker的时候并不支持自定义样式,只支持设置图标 icon,所以这里先使用 Build自定义组件,绘制出圆形 Marker:

  @BuilderBuilderMapCircularLabel(text: string, id: string) {Stack() {//绘制圆形背景Circle({ width: 70, height: 70 }).shadow({ radius: 8 }).fill($r("app.color.main_color"))Text(text).fontSize(12).fontColor($r("app.color.white")).textAlign(TextAlign.Center).padding({left: 4,right: 4,})}.id(id)}
2. 自定义房源展示 Marker

背景底部小三角,可以使用 Path 路径绘制。

/*** 矩形带小三角标的 marker 标注* @param text*/@BuilderBuilderMapRectLabel(text: string, id: string) {Column() {Text(text).fontSize(14).fontColor($r("app.color.white")).backgroundColor($r("app.color.main_color")).shadow({ radius: 5, color: $r("app.color.white") }).borderRadius(14).padding({left: 15,right: 15,top: 4,bottom: 4})//根据路径绘制小三角形Path().width(12).height(6).commands('M0 0 L30 0 L15 15 Z').fill($r("app.color.main_color")).strokeWidth(0)}.id(id).alignItems(HorizontalAlign.Center)}

7、地图上展示自定义 Marker

使用截屏类componentSnapshot,调用将自定义组件生成快照的方法createFromBuilder,在回调中获取生成的PixelMap对象,将 PixelMap对象设置给 MarkerOptions Marker参数icon中,调用 addMarker 方法在地图上生成 Marker点.

componentSnapshot.createFromBuilder(() => {//要生成图片 PixelMap对象的自定义组件this.BuilderMapRectLabel(text, houseId)}, async (error, imagePixelMap) => {if (error) {LogUtil.debug("snapshot failure: " + JSON.stringify(error));return}let markerOptions: mapCommon.MarkerOptions = {position: latLng,icon: imagePixelMap, //生成 PixelMap后的自定义组件title: houseId,  //可以传一些自定义参数,跟组件进行绑定,方便后续点击进行操作}if (!this.rectMarkers.find(marker => marker.getTitle() == houseId)) {//如果marker集合不存在已添加的 marker,则添加markerlet marker = await this.mapController?.addMarker(markerOptions)marker?.setClickable(true)if (marker) {this.rectMarkers.push(marker)}}})

8、监听 Marker的点击事件

使用 mapEventManager 的 mapEventManager.on("markerClick", () => {})方法来监听 marker的点击事件,在点击事件回调中根据地图层级可以处理点击的业务逻辑,比如点击进入地图层级,展示楼盘 marker等。

 this.mapEventManager.on("markerClick", (marker) => {if (marker.getTitle().length == 2) {//点击区域商圈,进入房源层级,展示房源信息//移动地图到目标位置this.mapController?.animateCamera(map.newLatLng({latitude: 30.513746,longitude: 114.403009}, 15))} else {//点击房源,可以进行后续操作ToastUtil.showToast(marker?.getTitle())}})

总结

以上就是鸿蒙 ArkUI实现地图找房的基本流程,具体细节可以根据自己的业务需求,实现自己想要的效果。目前地图上的制定 marker 还是通过自定义组件生成图片,来展示,当Marker比较多时,对性能可能有一定的影响,可以进一步优化,每次只展示当前屏幕内的 Marker图,滑动移除屏幕外的 marker,同时记录已经生成的 marker,避免每次都要重新生成 marker PixelMap对象。

相关文章:

鸿蒙 ArkUI实现地图找房效果

常用的地图找房功能&#xff0c;是在地图上添加区域、商圈、房源等一些自定义 marker&#xff0c;然后配上自己应用的一些筛选逻辑构成&#xff0c;在这里使用鸿蒙 ArkUI 简单实现下怎么添加区域/商圈、房源等 Marker. 1、开启地图服务 在华为开发者官网&#xff0c;注册应用&…...

一套极简易的直流无刷电机(Deng FOC)开发套件介绍

目录 概述 1. 硬件组成介绍 1.1 主要硬件 1.2 电机驱动板介绍 1.3 2208电机模块 1.3.1 参数介绍 1.3.2 认识2208电机 2 驱动板接口介绍 2.1 PCB接口&#xff08;MCU&#xff09;定义 2.2 功能描述 2.2.1 电机驱动接口 2.2.2 编码器接口 2.2.3 电流输入引脚接口 2.…...

Inception模型详解及代码分析

模型背景 Inception系列模型由Google团队提出,旨在解决CNN分类模型面临的两大挑战: 如何在增加网络深度的同时提升分类性能 如何在保证分类准确率的同时降低计算和内存开销 Inception V1通过引入 并行卷积结构 和 1x1卷积 ,巧妙地解决了这两个问题,在保证模型质量的前提下…...

Springboot AOP 每个接口运行前 修改入参

控制台log输出为何频频失踪?   wxss代码为何频频失效?   wxml布局为何乱作一团?   究竟是道德的沦丧?还是人性的缺失?   让我们一起来 走 跑进科学 前言 麻蛋被这个功能恶心好久 终于解决了 特此记录一下 正文 Before("authCut()")public void cutProc…...

课题推荐——基于GPS的无人机自主着陆系统设计

关于“基于GPS的无人机自主着陆系统设计”的详细展开&#xff0c;包括项目背景、具体内容、实施步骤和创新点。如需帮助&#xff0c;或有导航、定位滤波相关的代码定制需求&#xff0c;请点击文末卡片联系作者 文章目录 项目背景具体内容实施步骤相关例程MATLAB例程python例程 …...

【深度学习】在深度学习训练过程中,数据量太少会导致模型过拟合还是欠拟合?

过拟合与欠拟合 过拟合 : 是指在训练集上表现非常好&#xff0c;但是在新的数据集上表现较差的现象。具体来说&#xff0c;模型在训练集上过度学习&#xff0c;捕捉了数据中的噪声和偶然性&#xff0c;导致它对训练数据的拟合非常精确&#xff0c;但缺乏泛化能力&#xff0c;无…...

js迭代器模式

以前JS原生的集合类型数据结构&#xff0c;只有Array&#xff08;数组&#xff09;和Object&#xff08;对象&#xff09;&#xff1b; 而ES6中&#xff0c;又新增了Map和Set。四种数据结构各自有着自己特别的内部实现&#xff0c;但我们仍期待以同样的一套规则去遍历它们&…...

测试开发基础知识2

10.什么是等价类和边界值法&#xff1f; 1)等价类划分 等价类划分是将系统的输入域划分为若干部分&#xff0c;然后从每个部分选取少量代表性数据进行测试。等价类划分认为如果一个测试用例在某个等价类中的一个值上通过测试&#xff0c;那么它在这个类中的其他值上也…...

PromQL基础使用和案例解析

文章目录 PromQL简介数据类型1、瞬时数据 (Instant vector)2、区间数据 (Range vector)➢ Time Durations➢ Offest modifier➢ modifier 3、标量数据 (Scalar)4、字符串 (String) 条件匹配1、完全匹配2、正则匹配 运算符1、比较运算符2、算数运算符3、逻辑运算符4、聚合运算符…...

使用Python实现基于机器学习的垃圾邮件过滤

友们好! 我的新专栏《Python进阶》正式启动啦!这是一个专为那些渴望提升Python技能的朋友们量身打造的专栏,无论你是已经有一定基础的开发者,还是希望深入挖掘Python潜力的爱好者,这里都将是你不可错过的宝藏。 在这个专栏中,你将会找到: ● 深入解析:每一篇文章都将深…...

MySql根据经纬度查询距离

一、搭建测试 创建数据表() CREATE TABLE sys_test (id int(11) NOT NULL AUTO_INCREMENT COMMENT 主键ID,name varchar(20) DEFAULT NULL COMMENT 名称,longitude decimal(10,6) DEFAULT NULL COMMENT 经度,latitude decimal(10,6) DEFAULT NULL COMMENT 维度,PRIMARY KEY (id…...

Aviatrix Controller 未授权命令注入漏洞复现(CVE-2024-50603)

0x01 产品简介 Aviatrix Controller是一款强大的云网络管理平台,提供简化的跨云网络管理、自动化配置、安全策略、流量监控等功能,帮助企业实现更加灵活、安全和高效的云网络架构,特别适用于多云和混合云环境。主要用于编排和管理各种网络和连接解决方案。它为用户提供了一…...

数据结构与算法之二叉树: LeetCode 109. 有序链表转换二叉搜索树 (Ts版)

有序链表转换二叉搜索树 https://leetcode.cn/problems/convert-sorted-list-to-binary-search-tree/description/ 描述 给定一个单链表的头节点 head &#xff0c;其中的元素 按升序排序 &#xff0c;将其转换为 平衡 二叉搜索树 示例 1 输入: head [-10,-3,0,5,9] 输出:…...

Android NDK开发入门2之适应idm环境

环境搭建 Android NDK开发实战之环境搭建篇(so库,Gemini ai)-CSDN博客 初始配置 前面已经运行了一个简单的初始程序&#xff0c;现在我们来往初始程序添加类和函数&#xff0c;并成功运行的实验。 一级配置 第一层配置主要是cmake文件环境和一些编译选项。 build配置 可参…...

如何隐藏 Nginx 版本号 并自定义服务器信息,提升安全性

&#x1f3e1;作者主页&#xff1a;点击&#xff01; Nginx-从零开始的服务器之旅专栏&#xff1a;点击&#xff01; &#x1f427;Linux高级管理防护和群集专栏&#xff1a;点击&#xff01;点击&#xff01;点击&#xff01; ⏰️创作时间&#xff1a;2025年1月8日8点14分…...

鸿蒙的APP真机调试以及发布

目录&#xff1a; 1、创建好鸿蒙项目2、创建AGC项目3、实现自动签名3.1、手动方式创建签名文件和密码 4、运行项目5、无线真机调试 1、创建好鸿蒙项目 2、创建AGC项目 &#xff08;1&#xff09;在File->Project Structure->Project->Signing Configs中进行登录。(未…...

图像处理|膨胀操作

在图像处理领域&#xff0c;形态学操作是一种基于图像形状的操作&#xff0c;用于分析和处理图像中对象的几何结构。**膨胀操作&#xff08;Dilation&#xff09;**是形态学操作的一种&#xff0c;它能够扩展图像中白色区域&#xff08;前景&#xff09;或减少黑色区域&#xf…...

攻防世界 ics-07

点击之后发现有个项目管理能进&#xff0c;点进去&#xff0c;点击看到源码&#xff0c;如下三段 <?php session_start(); if (!isset($_GET[page])) { show_source(__FILE__); die(); } if (isset($_GET[page]) && $_GET[page] ! index.php) { include(flag.php);…...

C# 之某度协议登录,JS逆向,手机号绑定,获取CK

.NET兼职社区 .NET兼职社区 .NET兼职社区 .NET兼职社区 有需要指导&#xff0c;请私信我留言V或者去社区找客服。...

js适配器模式

适配器模式通过把一个类的接口变换成客户端所期待的另一种接口&#xff0c;可以帮我们解决不兼容的问题。 应用 // Ajax适配器函数&#xff0c;入参与旧接口保持一致 async function AjaxAdapter(type, url, data, success, failed) {const type type.toUpperCase()let resul…...

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

什么是库存周转?如何用进销存系统提高库存周转率?

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

Linux云原生安全:零信任架构与机密计算

Linux云原生安全&#xff1a;零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言&#xff1a;云原生安全的范式革命 随着云原生技术的普及&#xff0c;安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测&#xff0c;到2025年&#xff0c;零信任架构将成为超…...

VTK如何让部分单位不可见

最近遇到一个需求&#xff0c;需要让一个vtkDataSet中的部分单元不可见&#xff0c;查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行&#xff0c;是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示&#xff0c;主要是最后一个参数&#xff0c;透明度…...

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

【Oracle】分区表

个人主页&#xff1a;Guiat 归属专栏&#xff1a;Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”(装配)

船舶制造装配管理现状&#xff1a;装配工作依赖人工经验&#xff0c;装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书&#xff0c;但在实际执行中&#xff0c;工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...

【Go语言基础【13】】函数、闭包、方法

文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数&#xff08;函数作为参数、返回值&#xff09; 三、匿名函数与闭包1. 匿名函数&#xff08;Lambda函…...

MacOS下Homebrew国内镜像加速指南(2025最新国内镜像加速)

macos brew国内镜像加速方法 brew install 加速formula.jws.json下载慢加速 &#x1f37a; 最新版brew安装慢到怀疑人生&#xff1f;别怕&#xff0c;教你轻松起飞&#xff01; 最近Homebrew更新至最新版&#xff0c;每次执行 brew 命令时都会自动从官方地址 https://formulae.…...