鸿蒙ArkTS如何接入地图【已解决】

rapidSpace

已于 2024-02-13 15:57:42 修改

阅读量2.8k

点赞数 20

文章标签： harmonyos 华为

于 2024-02-13 15:51:58 首次发布

本文链接：https://blog.csdn.net/m0_74276051/article/details/136101751

版权

本文介绍了在鸿蒙系统中使用ArkTS开发地图应用遇到的瓶颈，提出通过将HTML页面嵌入鸿蒙APP并利用Web组件来调用地图接口。开发者需注意配置网络权限，如高德地图的网络访问。示例代码展示了如何在HTML中实现地图、标记和信息窗口功能，并在鸿蒙模拟器或真机上运行，以及网络权限的配置方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述

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

解决方法

使用鸿蒙的Web组件，将HTML页面嵌入到鸿蒙APP中。

简单来说就是，各大地图厂商是适配普通Web页面的开发的，那么就用HTML去使用地图接口，鸿蒙 ArkTS 作为壳子。

这个方法可以为很多目前因为鸿蒙不完善而堵塞开发的问题提供一个新思路。

1. 编写HTML（以高德地图为例）

该HTML的功能：1. 创建地图，2. 批量添加标记，3. 点击标记显示信息

可以继续拓展功能......

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <title>xxxx</title>
    <style>
      html,
      body,
      #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>

  <body style="position: absolute">
    <div
      id="mapContainer"
      style="width: 100%; height: 100vh; border: 1px solid #000000"
    ></div>

    <script type="text/javascript">
      window._AMapSecurityConfig = {
        securityJsCode: "xxx",
      };
    </script>
    <script src="https://webapi.amap.com/loader.js"></script>

    <script type="text/javascript">
      var AMapStore = {
        AMapBox: "", // 高德地图容器
        map: {},
        marker: [], // 标记
      };

      // 存储地点信息
      const locations = [];

      // 加载高德地图容器
      async function LoaderMap() {
        try {
          const AMap = await AMapLoader.load({
            key: "xxxx", // 请替换成你申请的应用key
            version: "2.0", // 指定要加载的 JS API 的版本
          });
          AMapStore.AMapBox = AMap;
        } catch (e) {
          console.error(e);
        }
      }

      // 建立地图
      async function createMap() {
        AMapStore.map = await new AMapStore.AMapBox.Map("mapContainer", {
          viewMode: "2D",
          zoom: 15.4,
          center: [xx, xx],
        });
      }

      // 标记所有地点
      function AllMapMaker() {
        for (let i = 0; i < locations.length; i += 1) {
          MapMaker(locations[i].coordinates, i, locations[i].name);
        }
      }

      // 标记地图
      function MapMaker(positionNum, num, name) {
        AMapStore.marker.push(
          new AMapStore.AMapBox.Marker({
            icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
            position: [positionNum[0], positionNum[1]],
            title: name,
            offset: new AMapStore.AMapBox.Pixel(-13, -30),
          })
        );

        let infoWindow; // 声明 infoWindow 变量以便在点击地图时进行访问

        // 添加标记点击事件监听器
        AMapStore.marker[num].on("click", () => {
          // 如果之前有打开的信息窗体，则先关闭
          if (infoWindow) {
            infoWindow.close();
          }

          // 创建信息窗体
          infoWindow = new AMapStore.AMapBox.InfoWindow({
            content: `<div style="max-width: 300px;">${locations[num].details}</div>`,
            offset: new AMapStore.AMapBox.Pixel(40.15, -42),
            zIndex: 1000,
          });

          // 打开信息窗体
          infoWindow.open(AMapStore.map, AMapStore.marker[num].getPosition());
        });

        // 添加地图点击事件监听器
        AMapStore.map.on("click", () => {
          // 关闭信息窗体
          if (infoWindow) {
            infoWindow.close();
          }
        });

        AMapStore.map.add(AMapStore.marker[num]);
      }

      // 初始化一切
      async function init() {
        await LoaderMap();
        await createMap();
        await AllMapMaker();
      }

      init();
    </script>
  </body>
</html>

2. 安置HTML文件

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

3. 接入鸿蒙ArkTS

import web_webview from '@ohos.web.webview';

@Entry
@Component
struct WebComponent {
  webviewController: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column() {
      // 组件创建时，通过$rawfile加载本地文件map.html
      Web({ src: $rawfile("map.html"), controller: this.webviewController })
    }
  }
}

4. 在模拟机或真机运行

在鸿蒙自带的预览器运行会报错

地图加载过程，涉及网络资源获取，需要配置ohos.permission.INTERNET网络访问权限。

以ArkTS的Stage模型为例：

需要在module.json5配置文件中声明权限，添加下列代码即可

{
  "module": {
    ......
    "requestPermissions":[
      {
        "name": "ohos.permission.INTERNET"
      }
    ],
    ......
  }
}