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

【高心星出品】

文章目录

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

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

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

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

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

运行结果：

准备地图

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

准备一个基础地图。

HTML代码如下：

      html, body, #container { width: 100%; height: 100%; }   #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; } 
  
 window._AMapSecurityConfig = { securityJsCode: \"210560c7b915b95686d9baa8b12d5a83\", }; var map AMapLoader.load({ key: \"xxxxxxxxxxxx\", //申请好的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, //页码 selectFirst:true, map: map, //展现结果的地图实例 panel: \"panel\", //参数值为你页面定义容器的 id 值
，结果列表将在此容器中进行展示。 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\"); }}

除了展示地图，还有与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@Componentstruct Index { @State message: string = \'Hello World\'; @State addrname:string=\'\' @State addr:string=\'\' private ports:webview.WebMessagePort[]=[] private　port:webview.WebMessagePort|null=null private 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 Addr this.addrname=jsondata.name this.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}