【HarmonyOS】低代码元服务开发中的地图实现

这篇具有很好参考价值的文章主要介绍了【HarmonyOS】低代码元服务开发中的地图实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在元服务开发过程中,大家可能需要在应用中使用地图,如果使用SDK集成的方式,地图SDK包体积大小很大,集成后元服务大小可能会超过10M,这就超出了HAP包的大小限制。那么是否有其他途径可以在元服务中使用地图呢?笔者最近在学习AGC新推出的低代码开发元服务的文档时发现,他的景区模板(模板简介-基于模板开发元服务-低代码平台开发元服务-AppGallery Connect帮助中心 | 华为开发者联盟 (huawei.com))集成了地图但是并没有通过SDK的方式导入的地图,使用的是WebView+本地html+腾讯Javascript API GL的方式实现的地图,下面给大家讲述一下具体实现的流程。

【腾讯地图Javascript API GL】

首先我们在在腾讯地图官网找到Javascript API GL的文档JavaScript API | 腾讯位置服务 (qq.com)。

1、我们需要注册帐号并且在控制台创建应用和key,然后就可以运行demo查看是否可以正常加载地图了。

2、这边我们将示例中的代码,拷贝到新建的文件demo.html中,将demo.html文件放置于HarmonyOS工程的资源目录下(entry/src/main/resources/rawfile/)。将上面申请的key替换示例代码中<script src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>这边的key

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Hello world!</title>
   <style type="text/css">
   #container{
       /*地图(容器)显示大小*/
       width:1200px;
       height:400px;
   }
   </style>
   <!--引入Javascript API GL,参数说明参见下文-->
   <script src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
   <script>
       //地图初始化函数,本例取名为init,开发者可根据实际情况定义
       function initMap() {
           //定义地图中心点坐标
           var center = new TMap.LatLng(39.984120, 116.307484)
           //定义map变量,调用 TMap.Map() 构造函数创建地图
           var map = new TMap.Map(document.getElementById('container'), {
               center: center,//设置地图中心点坐标
               zoom: 17.2,  //设置地图缩放级别
               pitch: 43.5, //设置俯仰角
               rotation: 45   //设置地图旋转角度
           });
       }
   </script>
</head>
<!-- 页面载入后,调用init函数 -->
<body "initMap()">
   <!-- 定义地图显示容器 -->
   <div id="container"></div>
</body>
</html>

3、需要注意的是腾讯地图已经不再支持file://的方式使用Javascript API GL,所以我们在Android中通过WebView加载这个本地的html文件是无法使用这个JS API的

webView.loadUrl("file:///android_asset/demo.html");

那是不是HarmonyOS中我们也束手无策了呢?

很惊喜的是:出于安全考虑,HarmonyOS中WebView虽然不支持直接通过File协议加载资源文件或本地文件。但是可以通过加载https或者http地址的方式,加载本地的html文件,如下:

webView.load("https://example.com/rawfile/example.html");

这正好解决了我们的问题。

【WebView加载本地Html】

加载地图之前我们需要完成工程的权限设置,应用使用的是Web地图所以需要申请网络权限如下:

"reqPermissions": [
 {
   "name": "ohos.permission.INTERNET",
   "mergeRule": {
     "remove": [
       "reason"
     ]
   }
 }

]

然后我们需要实现的是WebView加载本地Html,在官网我们可以找到加载资源文件和本地文件的方法(WebView-常用组件开发指导-Java UI框架-UI-基于Java开发-开发-HarmonyOS应用开发)

这边使用的是通过processResourceRequest方法访问文件,具体代码如下:

WebView webView= (WebView) findComponentById(ResourceTable.Id_webview);
webView.getWebConfig().setJavaScriptPermit(true);
webView.getWebConfig().setWebStoragePermit(true);

webView.setWebAgent(new WebAgent() {
   @Override
   public ResourceResponse processResourceRequest(WebView webview, ResourceRequest request) {
       final String authority = "com.example.javawebmap";
       final String rawFile = "/rawfile/";
       Uri requestUri = request.getRequestUrl();
       if (authority.equals(requestUri.getDecodedAuthority())) {
           String path = requestUri.getDecodedPath();
           if (TextTool.isNullOrEmpty(path)) {
               return super.processResourceRequest(webview, request);
           }
           if (path.startsWith(rawFile)) {
               // 根据自定义规则访问资源文件
               String rawFilePath = "entry/resources/rawfile/" + path.replace(rawFile, "");
               String mimeType = URLConnection.guessContentTypeFromName(rawFilePath);
               try {
                   Resource resource = MainAbilitySlice.this.getContext().getResourceManager().getRawFileEntry(rawFilePath).openRawFile();
                   return new ResourceResponse(mimeType, resource, null);
               } catch (IOException e) {
                   HiLog.info(TAG, "open raw file failed " + e.getMessage());
               }
           }
       }
       return super.processResourceRequest(webview, request);
   }

});

最后我们通过load的方式加载本地的demo.html文件

webView.load("https://com.example.javawebmap/rawfile/demo.html");

【运行效果】

最后我们就可以看到运行的效果了

如果需要跟地图进行进一步的开发或者交互我们可以使用webView.addJsCallback的方式,这个在上面的WebView使用说明中同样也有。至此我们通过WebView和腾讯地图Javascript API GL的方式完成简单地图的加载。

【参考文章】

模板简介-基于模板开发元服务-低代码平台开发元服务-AppGallery Connect帮助中心 | 华为开发者联盟 (huawei.com)

WebView-常用组件开发指导-Java UI框架-UI-基于Java开发-开发-HarmonyOS应用开发

JavaScript API | 腾讯位置服务 (qq.com)

 欲了解更多更全技术文章,欢迎访问https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh 文章来源地址https://www.toymoban.com/news/detail-459008.html

到了这里,关于【HarmonyOS】低代码元服务开发中的地图实现的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • HarmonyOS 鸿蒙开发DevEco Studio OpenHarmony:使用低代码进行开发

    OpenHarmony低代码开发方式,具有丰富的UI界面编辑功能,遵循JS、TS开发规范 ,通过可视化界面开发方式快速构建布局,可有效降低用户的时间成本和提升用户构建UI界面的效率。 说明 支持使用低代码进行JS/eTS页面开发,本章节以开发eTS页面为例,介绍低代码功能及使用方法。

    2024年02月19日
    浏览(64)
  • HarmonyOS元服务开发实践:桌面卡片字典

    一、项目说明 1.DEMO创意为卡片字典。 2.不同卡片显示不同内容:微卡、小卡、中卡、大卡,根据不同卡片特征显示同一个字的不同内容,基于用户习惯可选择喜欢的卡片。 3.万能卡片刷新:用户点击卡片刷新按钮查看新内容,同时卡片设置了定时刷新,让用户每天看到的卡片

    2024年02月14日
    浏览(35)
  • Stage模型HarmonyOS服务卡片开发整体说明

    服务卡片(以下简称“卡片”)是一种界面展示形式,可以将应用的重要信息或操作前置到卡片,以达到服务直达、减少体验层级的目的。卡片常用于嵌入到其他应用(当前卡片使用方只支持系统应用,如桌面)中作为其界面显示的一部分,并支持拉起页面、发送消息等基础

    2024年02月15日
    浏览(39)
  • HarmonyOS鸿蒙原生应用开发设计- 元服务(原子化服务)图标

    HarmonyOS设计文档中,为大家提供了独特的元服务图标,开发者可以根据需要直接引用。 开发者直接使用官方提供的元服务图标内容,既可以符合HarmonyOS原生应用的开发上架运营规范,又可以防止使用别人的元服务图标侵权意外情况等,减少自主创作元服务图标的工作量。当然

    2024年02月06日
    浏览(52)
  • HarmonyOS鸿蒙原生应用开发设计- 服务组件库

    HarmonyOS设计文档中,为大家提供了一些已经设计好的原生服务组件库,开发者可以根据需要直接引用。 开发者直接使用官方提供的服务组件库样式,既可以符合HarmonyOS原生应用的开发上架运营规范,又可以防止使用别人的内容产生的侵权意外情况等,减少自主创作设计的工作

    2024年02月08日
    浏览(62)
  • HarmonyOS/OpenHarmony元服务开发-卡片生命周期管理

    创建ArkTS卡片,需实现FormExtensionAbility生命周期接口。 1.在EntryFormAbility.ts中,导入相关模块。 2.在EntryFormAbility.ts中,实现FormExtensionAbility生命周期接口,其中在onAddForm的入参want中可以通过FormParam取出卡片的相关信息。 说明:FormExtensionAbility进程不能常驻后台,即在卡片生命周

    2024年02月15日
    浏览(42)
  • HarmonyOS/OpenHarmony元服务开发-ArkTS卡片运行机制

    一、实现原理 图1 ArkTS卡片实现原理   卡片使用方:显示卡片内容的宿主应用,控制卡片在宿主中展示的位置,当前仅系统应用可以作为卡片使用方。 卡片提供方:提供卡片显示内容的应用,控制卡片的显示内容、控件布局以及控件点击事件。 卡片管理服务:用于管理系统

    2024年02月16日
    浏览(44)
  • HarmonyOS/OpenHarmony元服务开发-配置卡片的配置文件

    卡片相关的配置文件主要包含FormExtensionAbility的配置和卡片的配置两部分: 1.卡片需要在module.json5配置文件中的extensionAbilities标签下,配置FormExtensionAbility相关信息。FormExtensionAbility需要填写metadata元信息标签,其中键名称为固定字符串“ohos.extension.form”,资源为卡片的具体配

    2024年02月14日
    浏览(34)
  • HarmonyOS/OpenHarmony元服务开发-卡片使用动效能力

    ArkTS卡片开放了使用动画效果的能力,支持显式动画、属性动画、组件内转场能力。需要注意的是,ArkTS卡片使用动画效果时具有以下限制:   以下示例代码实现了按钮旋转的动画效果:

    2024年02月15日
    浏览(35)
  • Stage模型HarmonyOS服务卡片开发ArkTS卡片相关模块

    图1  ArkTS卡片相关模块   FormExtensionAbility:卡片扩展模块,提供卡片创建、销毁、刷新等生命周期回调。 FormExtensionContext:FormExtensionAbility的上下文环境,提供FormExtensionAbility具有的接口和能力。 formProvider:提供卡片提供方相关的接口能力,可通过该模块提供接口实现更新卡

    2024年02月12日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包