HarmonyOS 5.0应用开发——鸿蒙接入高德地图实现POI搜索

【高心星出品】

文章目录

      • 鸿蒙接入高德地图实现POI搜索
        • 运行结果：
        • 准备地图
        • 编写ArkUI布局来加载HTML地图

鸿蒙接入高德地图实现POI搜索

在当今数字化时代，地图应用已成为移动设备中不可或缺的一部分。随着鸿蒙系统的日益普及，如何在鸿蒙应用中接入高德地图并实现POI（兴趣点）检索功能，成为了众多开发者关注的焦点。本文将详细介绍这一过程，帮助开发者快速上手，为用户打造更优质的地图体验。

鸿蒙系统作为华为自主研发的分布式操作系统，具有高性能、低功耗等诸多优势，为智能设备提供了强大的支持。而高德地图凭借其丰富的数据资源、精准的定位功能以及多样化的地图服务，在国内地图应用领域占据重要地位。将鸿蒙与高德地图相结合，能够充分发挥双方的优势，为用户提供更加便捷、高效的地图导航和POI检索服务。

但是目前高德地图API暂不支持HarmonyOS5.0版本，需要使用鸿蒙的Web组件加载JS版高德地图。

运行结果：

在这里插入图片描述

准备地图

首先需要注册高德地图开发者，创建应用：https://lbs.amap.com/api/javascript-api-v2/prerequisites

准备一个基础地图。

HTML代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><metaname="viewport"content="initial-scale=1.0, user-scalable=no, width=device-width"/><title>HELLO，AMAP!</title><style>html,body,#container {width: 100%;height: 100%;}</style><style type="text/css">#panel {position: absolute;max-height: 90%;height:300px;overflow-y: auto;top: 50px;right: 10px;width: 180px;}.amap_lib_placeSearch .poibox .poi-title{font-size:12px;}.amap_lib_placeSearch .poibox .poi-info p{font-size:10px;}#search {position: absolute;background-color: transparent;max-height: 90%;overflow-y: auto;top: 20px;right: 10px;width: 180px;}#search_input{width:120px;}</style>
</head>
<body>
<div id="container"></div>
<div id="panel"></div>
<div id="search"><input id="search_input" type="text" placeholder="搜索地址"><input id="search_sub" type="submit" value="搜索" onclick="search()">
</div>
<script type="text/javascript">window._AMapSecurityConfig = {securityJsCode: "210560c7b915b95686d9baa8b12d5a83",};
</script>
<script src="https://webapi.amap.com/loader.js"></script>
<script type="text/javascript">var mapAMapLoader.load({key: "d7b81d72864f222e583d2283493cdd58", //申请好的Web端开发者 Key，调用 load 时必填version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15}).then((AMap) => {map = new AMap.Map("container",{zoom:10,center: [118.832028,31.875796], //地图中心点});//异步加载控件AMap.plugin('AMap.ToolBar',function(){var toolbar = new AMap.ToolBar(); //缩放工具条实例化map.addControl(toolbar); //添加控件});//异步加载控件AMap.plugin('AMap.Scale',function(){var scale = new AMap.Scale()map.addControl(scale); //添加控件});}).catch((e) => {console.error(e); //加载错误提示});function search(){// 获取输入框元素var inputElement = document.getElementById('search_input');// 获取输入框中的文本内容var searchText = inputElement.value;console.log(searchText);  // 在控制台输出文本内容searchplace(searchText)}function searchplace(addr){AMap.plugin(["AMap.PlaceSearch"], function () {const placeSearch = new AMap.PlaceSearch({pageSize: 5, //单页显示结果条数pageIndex: 1, //页码
<!--            city: "江苏", //兴趣点城市-->
<!--            citylimit: true, //是否强制限制在设置的城市内搜索-->selectFirst:true,map: map, //展现结果的地图实例panel: "panel", //参数值为你页面定义容器的 id 值<div id="my-panel"></div>，结果列表将在此容器中进行展示。autoFitView: true, //是否自动调整地图视野使绘制的 Marker 点都处于视口的可见范围});placeSearch.on('selectChanged', function(e) {console.log(JSON.stringify(e.selected.data))postStringToApp(JSON.stringify(e.selected.data))});placeSearch.search(addr);});}//-------------------地图展示很poi检索js代码----------------------------------//--------------------------------与arkts通信代码--------------------------
var h5Port;
window.addEventListener('message', function(event) {if (event.data == 'initport') {if(event.ports[0] != null) {h5Port = event.ports[0]; // 1. 保存从ets侧发送过来的端口h5Port.onmessage = function(event) {// 2. 接收ets侧发送过来的消息.var result = event.data;console.log('arkts发来的消息： '+result)}h5Port.onmessageerror = (event) => {console.error(`发送了错误信息: ${event}`);};}}
})// 使用h5Port往ets侧发送String类型的消息.
function postStringToApp(str) {if (h5Port) {h5Port.postMessage(str);} else {console.error("In html h5port is null, please init first");}
}</script>
</body>
</html>

除了展示地图，还有与ArkTS通信的过程：

HTML网页会接收到ArkTS第一次发送的端口号，通过该端口号建立通道，后面就可以通过该端口号收发消息。

var h5Port;
window.addEventListener('message', function(event) {if (event.data == 'initport') {if(event.ports[0] != null) {h5Port = event.ports[0]; // 1. 保存从ets侧发送过来的端口h5Port.onmessage = function(event) {// 2. 接收ets侧发送过来的消息.var result = event.data;console.log('arkts发来的消息： '+result)}h5Port.onmessageerror = (event) => {console.error(`发送了错误信息: ${event}`);};}}
})// 使用h5Port往ets侧发送String类型的消息.
function postStringToApp(str) {if (h5Port) {h5Port.postMessage(str);} else {console.error("In html h5port is null, please init first");}
}
编写ArkUI布局来加载HTML地图

加入权限

由于加载的地图需要使用网络权限，需要早module.json5中加入INTENET权限。

"module": {'requestPermissions': [{"name": "ohos.permission.INTERNET"}],....

加载地图

需要将离线的html地图放入项目的rawfile资源中。

编写ArkTS代码

这里需要在web组件加载结束后，与离线html建立通道收发消息。

import { webview } from '@kit.ArkWeb';
import { Addr } from '../../model/Addr';@Entry
@Component
struct Index {@State message: string = 'Hello World';@State addrname:string=''@State addr:string=''private ports:webview.WebMessagePort[]=[]private　port:webview.WebMessagePort|null=nullprivate controller:WebviewController=new webview.WebviewController()build() {Column(){Row({space:10}){Text('地点名称：')TextInput({text:this.addrname}).enabled(false).layoutWeight(1)}.width('100%').padding(10)Row({space:10}){Text('详细地址：')TextInput({text:this.addr}).enabled(false).layoutWeight(1)}.width('100%').padding(10)Web({src:$rawfile('poijiansuo.html'),controller:this.controller}).javaScriptAccess(true).imageAccess(true).zoomAccess(true).margin({top:10}).onPageEnd(()=>{// 创建web的通道端口号this.ports= this.controller.createWebMessagePorts()console.log('gxxt ',JSON.stringify(this.ports))// 将第二个端口号发送给html，做为html发送和接受arkts信息的端口号this.controller.postMessage('initport',[this.ports[1]],'*')//第一个端口号留给自己，作为发送和接受html信息的端口号this.port=this.ports[0]this.port.onMessageEventExt((result)=>{// 接受html的结果console.log('gxxt',JSON.stringify(result))let data= result.getString()let jsondata=JSON.parse(data) as Addrthis.addrname=jsondata.namethis.addr=jsondata.pname+jsondata.cityname+jsondata.adname+jsondata.address})})}.height('100%').width('100%')}
}

当从地图搜索某个POI地点后，点击列表中的搜索结果，就会将具体地址信息发送给ArkTS端，然后在鸿蒙端进行解析。

Addr接口

/***作者：gxx*时间：2025/2/21 16:43*功能：**/
export interface Addr {"id": string"name":string"type":string"location": number[],"address":string"tel":string"distance":string|null"shopinfo":string"website":string"pcode":string"citycode":string"adcode":string"postcode":string"pname":string"cityname":string"adname":string"email":string"photos": photos[]"entr_location": number[]"exit_location":string|null"groupbuy":boolean"discount":boolean"indoor_map":boolean"_idx":number"index":number
}
interface photos
{"title":string"url":string
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/24190.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Linux系统：服务器常见服务默认IP端口合集

Linux系统：服务器常见服务默认IP端口合集

服务器的默认IP端口取决于所使用的协议和服务类型。以下是一些常见服务和协议的默认端口&#xff1a; 服务端口实例&#xff1a; HTTP服务 默认端口&#xff1a;80 说明&#xff1a;用于普通的HTTP网页访问。例如&#xff0c;访问 http://example.com 时&#xff0c;默认使用8…
阅读更多...
一周学会Flask3 Python Web开发-flask3上下文全局变量session,g和current_app

一周学会Flask3 Python Web开发-flask3上下文全局变量session,g和current_app

锋哥原创的Flask3 Python Web开发 Flask3视频教程&#xff1a; 2025版 Flask3 Python web开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili flask3提供了session,g和current_app上下文全局变量来方便我们操作访问数据。 以下是一个表格&#xff0c;用于比较Flask中的…
阅读更多...
学习路程四 向量数据库Milvus安装与连接

学习路程四 向量数据库Milvus安装与连接

前序 在之前&#xff0c;已经简单完成了文档的加载&#xff0c;分割&#xff0c;向量化这些步骤&#xff0c;最后得到了结果。但是这些数据都是一次性的。假设一个律师所&#xff0c;有几千上万份卷宗&#xff0c;不可能每次使用都重新向量化数据吧。 所以我们需要有一个地方存…
阅读更多...
Docker 搭建 Nginx 服务器

Docker 搭建 Nginx 服务器

系列文章目录 Docker 搭建 Nginx 服务器 系列文章目录前言一、准备工作二、设置 Nginx 容器的目录结构三、启动一个临时的 Nginx 容器来复制配置文件四、复制 Nginx 配置文件到本地目录五、删除临时 Nginx 容器六、创建并运行 Nginx 容器&#xff0c;挂载本地目录七、修改 ngin…
阅读更多...
centos9安装k8s集群

centos9安装k8s集群

以下是基于CentOS Stream 9的Kubernetes 1.28.2完整安装流程&#xff08;containerd版&#xff09;&#xff1a; 一、系统初始化&#xff08;所有节点执行&#xff09; # 关闭防火墙 systemctl disable --now firewalld# 关闭SELinux sed -i "s/SELINUXenforcing/SELINU…
阅读更多...
WebSocket connection failed 解决

WebSocket connection failed 解决

WebSocket connection failed 解决 前言 这里如果是新手小白不知道 WebSocket 是什么的&#xff1f; 怎么使用的&#xff1f;或者想深入了解的 那可以 点击这里 几分钟带你快速了解并使用&#xff0c;已经一些进阶讲解&#xff1b; WebSocket&#xff0c;多应用于需要双向数据…
阅读更多...
基于大数据爬虫数据挖掘技术+Python的线上招聘信息分析统计与可视化平台(源码+论文+PPT+部署文档教程等)

基于大数据爬虫数据挖掘技术+Python的线上招聘信息分析统计与可视化平台(源码+论文+PPT+部署文档教程等)

博主介绍&#xff1a;CSDN毕设辅导第一人、全网粉丝50W,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流✌ 技术范围&#xff1a;SpringB…
阅读更多...
java给钉钉邮箱发送邮件

java给钉钉邮箱发送邮件

1.开通POP和IMAP 2.引入pom <dependency><groupId>javax.mail</groupId><artifactId>mail</artifactId><version>1.4.7</version> </dependency>3.逻辑 String host "smtp.qiye.aliyun.com"; String port "…
阅读更多...
五、AIGC大模型_04LLaMA-Factory基础知识与SFT实战

五、AIGC大模型_04LLaMA-Factory基础知识与SFT实战

1、LLaMA-Factory 基本介绍 1.1 定义 LLaMA-Factory 是一个开源的大型语言模型&#xff08;LLM&#xff09;微调框架&#xff0c;旨在帮助开发者和研究人员轻松地对预训练语言模型进行定制化训练和优化 1.2 功能特点 支持多种预训练模型 LLaMA Factory 支持超过 100 种主流的…
阅读更多...
故障诊断 | Matlab实现基于DBO-BP-Bagging多特征分类预测/故障诊断

故障诊断 | Matlab实现基于DBO-BP-Bagging多特征分类预测/故障诊断

故障诊断 | Matlab实现基于DBO-BP-Bagging多特征分类预测/故障诊断 目录 故障诊断 | Matlab实现基于DBO-BP-Bagging多特征分类预测/故障诊断分类效果基本介绍模型描述DBO-BP-Bagging蜣螂算法优化多特征分类预测一、引言1.1、研究背景和意义1.2、研究现状1.3、研究目的与方法 二…
阅读更多...
和Claude对战黑白棋！一起开发AI对弈游戏

和Claude对战黑白棋！一起开发AI对弈游戏

序言 为了提升自己的多模态处理能力和API调用技巧&#xff0c;我决定挑战一个有趣的项目——开发一款可以与Claude对战的黑白棋游戏&#xff01;这个项目不仅涉及游戏逻辑的实现&#xff0c;还需要调用Claude的API&#xff0c;让AI作为对手进行博弈。通过这个过程&#xff0c;…
阅读更多...
R-INLA实现绿地与狐狸寄生虫数据空间建模：含BYM、SPDE模型及PC先验应用可视化...

R-INLA实现绿地与狐狸寄生虫数据空间建模：含BYM、SPDE模型及PC先验应用可视化...

全文链接&#xff1a;https://tecdat.cn/?p40720 本论文旨在为对空间建模感兴趣的研究人员客户提供使用R-INLA进行空间数据建模的基础教程。通过对区域数据和地统计&#xff08;标记点&#xff09;数据的分析&#xff0c;介绍了如何拟合简单模型、构建和运行更复杂的空间模型&…
阅读更多...
ubuntu20.04安装docker

ubuntu20.04安装docker

3台主机&#xff0c;2台都能正确安装&#xff0c;第三台怎么都安装不成功&#xff1b; 3台主机都是一样的配置和系统&#xff1b; 后来看来是其外网的ip不一样&#xff0c;导致第三台主机可能被Qiang&#xff0c;不过错误只是提示签名不正确&#xff0c;在设置签名时好像没有…
阅读更多...
【Android】用 chrome://inspect/#devices 调试H5页面

【Android】用 chrome://inspect/#devices 调试H5页面

通常做Android开发的过程中&#xff0c;不可避免的需要遇到去与H5交互&#xff0c;甚至有时候需要去调试H5的信息。 这里分享一下Android工程里如何调试H5页面信息&#xff1a; 直接在浏览器地址栏输入 &#xff1a; chrome://inspect/#devices 直接连接手机usb,打开开发者模式…
阅读更多...
AI多模态梳理与应用思考｜从单文本到多视觉的生成式AI的AGI关键路径

AI多模态梳理与应用思考｜从单文本到多视觉的生成式AI的AGI关键路径

摘要&#xff1a; 生成式AI正从“文本独舞”迈向“多感官交响”&#xff0c;多模态将成为通向AGI的核心路径。更深度的多模态模型有望像ChatGPT颠覆文字交互一样&#xff0c;重塑物理世界的智能化体验。 一、多模态的必然性&#xff1a;从单一到融合 生成式AI的起点是文本生成…
阅读更多...
精美登录注册UI，登录页面设计模板

精美登录注册UI，登录页面设计模板

精美登录注册UI，登录页面设计模板 引言 在网页设计中，按钮是用户交互的重要元素之一。一个炫酷的按钮特效不仅能提升用户体验，还能为网页增添独特的视觉吸引力。今天，我们将通过CSS和JavaScript来实现一个“精美登录注册UI，登录页面设计模板”。该素材呈现了数据符号排版…
阅读更多...
kotlin 知识点一 变量和函数

kotlin 知识点一 变量和函数

在Kotlin中定义变量的方式和Java 区别很大&#xff0c;在Java 中如果想要定义一个变 量&#xff0c;需要在变量前面声明这个变量的类型&#xff0c;比如说int a表示a是一个整型变量&#xff0c;String b表 示b是一个字符串变量。而Kotlin中定义一个变量&#xff0c;只允许在变量…
阅读更多...
海洋 CMS V9SQL注入漏洞

海洋 CMS V9SQL注入漏洞

目录 禁用information_schema解决方法 方法一&#xff1a;替换法 sys performance_schema ​编辑 方法二&#xff1a;无列名注入 利用lxml模块进行布尔盲注 XPATH XPATH介绍: XPATH语法: 布尔盲注 标准代码&#xff1a; 运行结果&#xff1a; ​编辑 时间盲注 标准代…
阅读更多...
springcloud nacos 整合seata解决分布式事务

springcloud nacos 整合seata解决分布式事务

文章目录 nacos安装Mysql5.7安装及表初始化seata server安装下载并解压seata安装包在conf文件夹修改file.conf文件向本地数据库导入seata需要的表修改registry.conf文件将seata配置信息添加到nacos配置中心启动seata server springcloud整合seata测试流程正常下单流程扣减库存失…
阅读更多...
Linux搜索查找类指令

Linux搜索查找类指令

1、find指令 基本语法&#xff1a;find [搜索范围] [选项] 功能&#xff1a;将从指定目录向下递归地遍历其各个子目录&#xff0c;将满足条件的文件或目录显示在终端。 常用选项&#xff1a; 操作 命令示例 说明 查找指定路径下的所有文件 find /path/to/dir 查找指定目…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023