asp网站浏览器兼容,多语言社交网站开发,网络推广公司收费标准,西安免费做网站机构【高心星出品】 文章目录 鸿蒙接入高德地图实现POI搜索运行结果#xff1a;准备地图编写ArkUI布局来加载HTML地图 鸿蒙接入高德地图实现POI搜索
在当今数字化时代#xff0c;地图应用已成为移动设备中不可或缺的一部分。随着鸿蒙系统的日益普及#xff0c;如何在鸿蒙应用中…【高心星出品】 文章目录 鸿蒙接入高德地图实现POI搜索运行结果准备地图编写ArkUI布局来加载HTML地图 鸿蒙接入高德地图实现POI搜索
在当今数字化时代地图应用已成为移动设备中不可或缺的一部分。随着鸿蒙系统的日益普及如何在鸿蒙应用中接入高德地图并实现POI兴趣点检索功能成为了众多开发者关注的焦点。本文将详细介绍这一过程帮助开发者快速上手为用户打造更优质的地图体验。
鸿蒙系统作为华为自主研发的分布式操作系统具有高性能、低功耗等诸多优势为智能设备提供了强大的支持。而高德地图凭借其丰富的数据资源、精准的定位功能以及多样化的地图服务在国内地图应用领域占据重要地位。将鸿蒙与高德地图相结合能够充分发挥双方的优势为用户提供更加便捷、高效的地图导航和POI检索服务。
但是目前高德地图API暂不支持HarmonyOS5.0版本需要使用鸿蒙的Web组件加载JS版高德地图。
运行结果 准备地图
首先需要注册高德地图开发者创建应用https://lbs.amap.com/api/javascript-api-v2/prerequisites
准备一个基础地图。
HTML代码如下
!DOCTYPE html
html
headmeta charsetutf-8/meta http-equivX-UA-Compatible contentIEedge/metanameviewportcontentinitial-scale1.0, user-scalableno, widthdevice-width/titleHELLOAMAP!/titlestylehtml,body,#container {width: 100%;height: 100%;}/stylestyle typetext/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 idcontainer/div
div idpanel/div
div idsearchinput idsearch_input typetext placeholder搜索地址input idsearch_sub typesubmit value搜索 onclicksearch()
/div
script typetext/javascriptwindow._AMapSecurityConfig {securityJsCode: 210560c7b915b95686d9baa8b12d5a83,};
/script
script srchttps://webapi.amap.com/loader.js/script
script typetext/javascriptvar 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 idmy-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:stringState addr:stringprivate ports:webview.WebMessagePort[][]private port:webview.WebMessagePort|nullnullprivate controller:WebviewControllernew 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.portthis.ports[0]this.port.onMessageEventExt((result){// 接受html的结果console.log(gxxt,JSON.stringify(result))let data result.getString()let jsondataJSON.parse(data) as Addrthis.addrnamejsondata.namethis.addrjsondata.pnamejsondata.citynamejsondata.adnamejsondata.address})})}.height(100%).width(100%)}
}当从地图搜索某个POI地点后点击列表中的搜索结果就会将具体地址信息发送给ArkTS端然后在鸿蒙端进行解析。
Addr接口
/***作者gxx*时间2025/2/21 16:43*功能**/
export interface Addr {id: stringname:stringtype:stringlocation: number[],address:stringtel:stringdistance:string|nullshopinfo:stringwebsite:stringpcode:stringcitycode:stringadcode:stringpostcode:stringpname:stringcityname:stringadname:stringemail:stringphotos: photos[]entr_location: number[]exit_location:string|nullgroupbuy:booleandiscount:booleanindoor_map:boolean_idx:numberindex:number
}
interface photos
{title:stringurl:string
}
