鸿蒙ArkTS怎样接入舆图【已解决】

傲渊山岳  论坛元老 | 2024-10-30 13:55:10 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1049|帖子 1049|积分 3147

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

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

x
题目描述

用鸿蒙ArkTS语言开辟舆图APP应用时，开辟出现瓶颈。经过调研，很多舆图厂商只接入了鸿蒙Java，就算是有ArkTS版功能也比力少（我的调研不一定全面哈），而自己手动写舆图也很麻烦。

解决方法

使用鸿蒙的Web组件，将HTML页面嵌入到鸿蒙APP中。
简朴来说就是，各大舆图厂商是适配普通Web页面的开辟的，那么就用HTML去使用舆图接口，鸿蒙 ArkTS 作为壳子。
这个方法可以为很多目前由于鸿蒙不完善而堵塞开辟的题目提供一个新思路。
1. 编写HTML（以高德舆图为例）

该HTML的功能：1. 创建舆图，2. 批量添加标记，3. 点击标记显示信息
可以继承拓展功能......
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <meta
  6.       name="viewport"
  7.       content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
  8.     />
  9.     <title>xxxx</title>
  10.     <style>
  11.       html,
  12.       body,
  13.       #container {
  14.         width: 100%;
  15.         height: 100%;
  16.         margin: 0;
  17.         padding: 0;
  18.       }
  19.     </style>
  20.   </head>
  22.   <body style="position: absolute">
  23.     <div
  24.       id="mapContainer"
  25.       style="width: 100%; height: 100vh; border: 1px solid #000000"
  26.     ></div>
  28.     <script type="text/javascript">
  29.       window._AMapSecurityConfig = {
  30.         securityJsCode: "xxx",
  31.       };
  32.     </script>
  33.     <script src="https://webapi.amap.com/loader.js"></script>
  35.     <script type="text/javascript">
  36.       var AMapStore = {
  37.         AMapBox: "", // 高德地图容器
  38.         map: {},
  39.         marker: [], // 标记
  40.       };
  42.       // 存储地点信息
  43.       const locations = [];
  45.       // 加载高德地图容器
  46.       async function LoaderMap() {
  47.         try {
  48.           const AMap = await AMapLoader.load({
  49.             key: "xxxx", // 请替换成你申请的应用key
  50.             version: "2.0", // 指定要加载的 JS API 的版本
  51.           });
  52.           AMapStore.AMapBox = AMap;
  53.         } catch (e) {
  54.           console.error(e);
  55.         }
  56.       }
  58.       // 建立地图
  59.       async function createMap() {
  60.         AMapStore.map = await new AMapStore.AMapBox.Map("mapContainer", {
  61.           viewMode: "2D",
  62.           zoom: 15.4,
  63.           center: [xx, xx],
  64.         });
  65.       }
  67.       // 标记所有地点
  68.       function AllMapMaker() {
  69.         for (let i = 0; i < locations.length; i += 1) {
  70.           MapMaker(locations[i].coordinates, i, locations[i].name);
  71.         }
  72.       }
  74.       // 标记地图
  75.       function MapMaker(positionNum, num, name) {
  76.         AMapStore.marker.push(
  77.           new AMapStore.AMapBox.Marker({
  78.             icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
  79.             position: [positionNum[0], positionNum[1]],
  80.             title: name,
  81.             offset: new AMapStore.AMapBox.Pixel(-13, -30),
  82.           })
  83.         );
  85.         let infoWindow; // 声明 infoWindow 变量以便在点击地图时进行访问
  87.         // 添加标记点击事件监听器
  88.         AMapStore.marker[num].on("click", () => {
  89.           // 如果之前有打开的信息窗体，则先关闭
  90.           if (infoWindow) {
  91.             infoWindow.close();
  92.           }
  94.           // 创建信息窗体
  95.           infoWindow = new AMapStore.AMapBox.InfoWindow({
  96.             content: `<div style="max-width: 300px;">${locations[num].details}</div>`,
  97.             offset: new AMapStore.AMapBox.Pixel(40.15, -42),
  98.             zIndex: 1000,
  99.           });
  101.           // 打开信息窗体
  102.           infoWindow.open(AMapStore.map, AMapStore.marker[num].getPosition());
  103.         });
  105.         // 添加地图点击事件监听器
  106.         AMapStore.map.on("click", () => {
  107.           // 关闭信息窗体
  108.           if (infoWindow) {
  109.             infoWindow.close();
  110.           }
  111.         });
  113.         AMapStore.map.add(AMapStore.marker[num]);
  114.       }
  116.       // 初始化一切
  117.       async function init() {
  118.         await LoaderMap();
  119.         await createMap();
  120.         await AllMapMaker();
  121.       }
  123.       init();
  124.     </script>
  125.   </body>
  126. </html>
复制代码
2. 安置HTML文件

在resources下创建rawfile文件夹，将html文件放入即可

3. 接入鸿蒙ArkTS

  1. import web_webview from '@ohos.web.webview';
  3. @Entry
  4. @Component
  5. struct WebComponent {
  6.   webviewController: web_webview.WebviewController = new web_webview.WebviewController();
  8.   build() {
  9.     Column() {
  10.       // 组件创建时，通过$rawfile加载本地文件map.html
  11.       Web({ src: $rawfile("map.html"), controller: this.webviewController })
  12.     }
  13.   }
  14. }
复制代码
4. 在模拟机或真机运行

   在鸿蒙自带的预览器运行会报错
  舆图加载过程，涉及网络资源获取，必要设置ohos.permission.INTERNET网络访问权限。
以ArkTS的Stage模型为例：
必要在module.json5设置文件中声明权限，添加下列代码即可
  1. {
  2.   "module": {
  3.     ......
  4.     "requestPermissions":[
  5.       {
  6.         "name": "ohos.permission.INTERNET"
  7.       }
  8.     ],
  9.     ......
  10.   }
  11. }
复制代码


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

傲渊山岳

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表