qidao123.com技术社区-IT企服评测·应用市场»论坛 › 数据库 › SQL-Server › HarmonyOS 5.0应用开发——鸿蒙接入高德舆图实现POI搜刮 ...

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

[复制链接]
发表于 昨天 12:40 | 显示全部楼层 |阅读模式
【高心星出品】


鸿蒙接入高德舆图实现POI搜刮

在当今数字化期间，舆图应用已成为移动装备中不可或缺的一部门。随着鸿蒙体系的日益遍及，如安在鸿蒙应用中接入高德舆图并实现POI（爱好点）检索功能，成为了浩繁开发者关注的核心。本文将具体先容这一过程，资助开发者快速上手，为用户打造更优质的舆图体验。
鸿蒙体系作为华为自主研发的分布式利用体系，具有高性能、低功耗等诸多上风，为智能装备提供了强盛的支持。而高德舆图依附其丰富的数据资源、精准的定位功能以及多样化的舆图服务，在国本舆图应用范畴占据紧张职位。将鸿蒙与高德舆图相联合，可以或许充实发挥两边的上风，为用户提供更加便捷、高效的舆图导航和POI检索服务。
但是现在高德舆图API暂不支持HarmonyOS5.0版本，须要使用鸿蒙的Web组件加载JS版高德舆图。
运行结果：


预备舆图

起首须要注册高德舆图开发者，创建应用：https://lbs.amap.com/api/javascript-api-v2/prerequisites
预备一个根本舆图。
HTML代码如下：
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8"/>
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  6.     <meta
  7.             name="viewport"
  8.             content="initial-scale=1.0, user-scalable=no, width=device-width"
  9.     />
  10.     <title>HELLO，AMAP!</title>
  11.     <style>
  12.         html,
  13.         body,
  14.         #container {
  15.           width: 100%;
  16.           height: 100%;
  17.         }
  18.     </style>
  19.     <style type="text/css">
  20.         #panel {
  21.             position: absolute;
  22.             max-height: 90%;
  23.             height:300px;
  24.             overflow-y: auto;
  25.             top: 50px;
  26.             right: 10px;
  27.             width: 180px;
  29.         }
  30.          .amap_lib_placeSearch .poibox .poi-title{
  31.          font-size:12px;
  32.         }
  33.         .amap_lib_placeSearch .poibox .poi-info p{
  34.         font-size:10px;
  35.         }
  37.         #search {
  38.          position: absolute;
  39.             background-color: transparent;
  40.             max-height: 90%;
  41.             overflow-y: auto;
  42.             top: 20px;
  43.             right: 10px;
  44.             width: 180px;
  46.         }
  47.         #search_input{
  48.          width:120px;
  49.         }
  50.     </style>
  51. </head>
  52. <body>
  53. <div id="container"></div>
  54. <div id="panel"></div>
  55. <div id="search">
  56.     <input id="search_input" type="text" placeholder="搜索地址">
  57.     <input id="search_sub" type="submit" value="搜索" onclick="search()">
  58. </div>
  59. <script type="text/javascript">
  60.     window._AMapSecurityConfig = {
  61.       securityJsCode: "210560c7b915b95686d9baa8b12d5a83",
  62.     };
  63. </script>
  64. <script src="https://webapi.amap.com/loader.js"></script>
  65. <script type="text/javascript">
  68.     var map
  69.     AMapLoader.load({
  70.       key: "xxxxxxxxxxxx", //申请好的Web端开发者 Key，调用 load 时必填
  71.       version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
  72.     })
  73.       .then((AMap) => {
  74.          map = new AMap.Map("container",{
  75.           zoom:10,
  76.           center: [118.832028,31.875796], //地图中心点
  77.          });
  78.         //异步加载控件
  79.         AMap.plugin('AMap.ToolBar',function(){
  80.           var toolbar = new AMap.ToolBar(); //缩放工具条实例化
  81.           map.addControl(toolbar); //添加控件
  82.         });
  83.         //异步加载控件
  84.         AMap.plugin('AMap.Scale',function(){
  85.           var scale = new AMap.Scale()
  86.           map.addControl(scale); //添加控件
  87.         });
  89.       })
  90.       .catch((e) => {
  91.         console.error(e); //加载错误提示
  92.       });
  93.     function search()
  94.     {
  95.    // 获取输入框元素
  96.     var inputElement = document.getElementById('search_input');
  97.     // 获取输入框中的文本内容
  98.     var searchText = inputElement.value;
  99.     console.log(searchText);  // 在控制台输出文本内容
  100.     searchplace(searchText)
  101.     }
  102.     function searchplace(addr){
  103.      AMap.plugin(["AMap.PlaceSearch"], function () {
  104.           const placeSearch = new AMap.PlaceSearch({
  105.             pageSize: 5, //单页显示结果条数
  106.             pageIndex: 1, //页码
  107. <!--            city: "江苏", //兴趣点城市-->
  108. <!--            citylimit: true, //是否强制限制在设置的城市内搜索-->
  109.             selectFirst:true,
  110.             map: map, //展现结果的地图实例
  111.             panel: "panel", //参数值为你页面定义容器的 id 值<div id="my-panel"></div>，结果列表将在此容器中进行展示。
  112.             autoFitView: true, //是否自动调整地图视野使绘制的 Marker 点都处于视口的可见范围
  113.           });
  114.             placeSearch.on('selectChanged', function(e) {
  115.                 console.log(JSON.stringify(e.selected.data))
  116.                 postStringToApp(JSON.stringify(e.selected.data))
  117.             });
  118.           placeSearch.search(addr);
  120.         });
  121.     }
  122.     //-------------------地图展示很poi检索js代码----------------------------------
  124. //--------------------------------与arkts通信代码--------------------------
  125. var h5Port;
  126. window.addEventListener('message', function(event) {
  127.     if (event.data == 'initport') {
  128.         if(event.ports[0] != null) {
  129.             h5Port = event.ports[0]; // 1. 保存从ets侧发送过来的端口
  130.             h5Port.onmessage = function(event) {
  131.                 // 2. 接收ets侧发送过来的消息.
  132.                 var result = event.data;
  133.                 console.log('arkts发来的消息： '+result)
  134.             }
  135.             h5Port.onmessageerror = (event) => {
  136.                 console.error(`发送了错误信息: ${event}`);
  137.             };
  138.         }
  139.     }
  140. })
  142. // 使用h5Port往ets侧发送String类型的消息.
  143. function postStringToApp(str) {
  144.     if (h5Port) {
  145.         h5Port.postMessage(str);
  146.     } else {
  147.         console.error("In html h5port is null, please init first");
  148.     }
  149. }
  152. </script>
  153. </body>
  154. </html>
复制代码
除了展示舆图，尚有与ArkTS通讯的过程：
HTML网页会吸取到ArkTS第一次发送的端标语，通过该端标语创建通道，背面就可以通过该端标语收发消息。
  1. var h5Port;
  2. window.addEventListener('message', function(event) {
  3.     if (event.data == 'initport') {
  4.         if(event.ports[0] != null) {
  5.             h5Port = event.ports[0]; // 1. 保存从ets侧发送过来的端口
  6.             h5Port.onmessage = function(event) {
  7.                 // 2. 接收ets侧发送过来的消息.
  8.                 var result = event.data;
  9.                 console.log('arkts发来的消息： '+result)
  10.             }
  11.             h5Port.onmessageerror = (event) => {
  12.                 console.error(`发送了错误信息: ${event}`);
  13.             };
  14.         }
  15.     }
  16. })
  18. // 使用h5Port往ets侧发送String类型的消息.
  19. function postStringToApp(str) {
  20.     if (h5Port) {
  21.         h5Port.postMessage(str);
  22.     } else {
  23.         console.error("In html h5port is null, please init first");
  24.     }
  25. }
复制代码
编写ArkUI结构来加载HTML舆图

加入权限
由于加载的舆图须要使用网络权限，须要早module.json5中加入INTENET权限。
  1. "module": {
  2.   'requestPermissions': [{
  3.     "name": "ohos.permission.INTERNET"
  4.   }],
  5.   ....
复制代码
加载舆图
须要将离线的html舆图放入项目的rawfile资源中。
编写ArkTS代码
这里须要在web组件加载竣事后，与离线html创建通道收发消息。
  1. import { webview } from '@kit.ArkWeb';
  2. import { Addr } from '../../model/Addr';
  4. @Entry
  5. @Component
  6. struct Index {
  7.   @State message: string = 'Hello World';
  8.   @State addrname:string=''
  9.   @State addr:string=''
  10.   private ports:webview.WebMessagePort[]=[]
  11.   private　port:webview.WebMessagePort|null=null
  12.   private controller:WebviewController=new webview.WebviewController()
  13.   build() {
  14.     Column(){
  15.       Row({space:10}){
  16.         Text('地点名称：')
  17.         TextInput({text:this.addrname}).enabled(false)
  18.           .layoutWeight(1)
  19.       }.width('100%')
  20.       .padding(10)
  21.       Row({space:10}){
  22.         Text('详细地址：')
  23.         TextInput({text:this.addr}).enabled(false)
  24.           .layoutWeight(1)
  25.       }.width('100%')
  26.       .padding(10)
  28.       Web({src:$rawfile('poijiansuo.html'),controller:this.controller})
  29.         .javaScriptAccess(true)
  30.         .imageAccess(true)
  31.         .zoomAccess(true)
  32.         .margin({top:10})
  33.         .onPageEnd(()=>{
  34.           // 创建web的通道端口号
  35.           this.ports= this.controller.createWebMessagePorts()
  36.          console.log('gxxt ',JSON.stringify(this.ports))
  37.          // 将第二个端口号发送给html，做为html发送和接受arkts信息的端口号
  38.          this.controller.postMessage('initport',[this.ports[1]],'*')
  39.          //第一个端口号留给自己，作为发送和接受html信息的端口号
  40.           this.port=this.ports[0]
  41.           this.port.onMessageEventExt((result)=>{
  42.             // 接受html的结果
  43.             console.log('gxxt',JSON.stringify(result))
  44.             let data= result.getString()
  45.             let jsondata=JSON.parse(data) as Addr
  46.             this.addrname=jsondata.name
  47.             this.addr=jsondata.pname+jsondata.cityname+jsondata.adname+jsondata.address
  48.           })
  49.         })
  51.     }
  52.     .height('100%')
  53.     .width('100%')
  54.   }
  55. }
复制代码
当从舆图搜刮某个POI所在后，点击列表中的搜刮结果，就会将具体所在信息发送给ArkTS端，然后在鸿蒙端举行分析。
Addr接口
  1. /**
  2. *作者：gxx
  3. *时间：2025/2/21 16:43
  4. *功能：
  5. **/
  6. export interface Addr {
  7.   "id": string
  8.   "name":string
  9.   "type":string
  10.   "location": number[],
  11.   "address":string
  12.   "tel":string
  13.   "distance":string|null
  14.   "shopinfo":string
  15.   "website":string
  16.   "pcode":string
  17.   "citycode":string
  18.   "adcode":string
  19.   "postcode":string
  20.   "pname":string
  21.   "cityname":string
  22.   "adname":string
  23.   "email":string
  24.   "photos": photos[]
  25.   "entr_location": number[]
  26.   "exit_location":string|null
  27.   "groupbuy":boolean
  28.   "discount":boolean
  29.   "indoor_map":boolean
  30.   "_idx":number
  31.   "index":number
  32. }
  33. interface photos
  34. {
  35.   "title":string
  36.    "url":string
  37. }
复制代码
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
继续阅读请点击广告

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

×
回复

使用道具 举报

返回列表

九天猎人
+ 我要发帖
×
登录参与点评抽奖，加入IT实名职场社区
去登录
快速回复 返回顶部 返回列表