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
}