鸿蒙操作系统 HarmonyOS 3.2 API 9 Stage模型通过ArkTS接入高德地图

	用鸿蒙ArkTS语言开发地图APP应用时,很多地图厂商只接入了鸿蒙Java,ArkTS版本陆续接入中,等一段时间才能面世,当前使用地图只能通过鸿蒙的Web组件,将HTML页面嵌入到鸿蒙APP中。具体方法如下:

编写HTML

<!doctype html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"><link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" /><title>地图显示</title><style>html,body,#container {width: 100%;height: 100%;}</style>
</head>
<body>
<div id="container"></div>
<!-- 加载地图JSAPI脚本 -->
<script src="https://webapi.amap.com/maps?v=2.0&key=de902434abc3339233ab7d6e630fc342"></script>
<script>var map = new AMap.Map('container', {viewMode: '2D', // 默认使用 2D 模式,如果希望使用带有俯仰角的 3D 模式,请设置 viewMode: '3D'zoom:11, // 初始化地图层级center: [116.397428, 39.90923] // 初始化地图中心点});
</script>
</body>
</html>

安置HTML文件

在resources下创建rawfile文件夹,将html文件放入即可
在这里插入图片描述

鸿蒙ArkTS使用webview

import web_webview from '@ohos.web.webview';@Entry
@Component
struct WebComponent {webviewController: web_webview.WebviewController = new web_webview.WebviewController();build() {Column() {// 组件创建时,通过$rawfile加载本地文件map.htmlWeb({ src: $rawfile("map.html"), controller: this.webviewController })}}
}

配置网络访问权限

地图加载过程,涉及网络资源获取,需要配置ohos.permission.INTERNET网络访问权限。在module.json5配置文件中声明权限,添加下列代码即可。

{"module": {......"requestPermissions":[{"name": "ohos.permission.INTERNET"}],......}
}
  1. 在模拟机运行
    在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/542417.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Redis系列学习文章分享---第三篇(Redis快速入门之Java客户端--短信登录+session+验证码+拦截器+登录刷新)

目录 Redis的短信登录实战解析1. 短信登录-基于session实现短信登录的流程2. 短信登录-实现发送短信验证码功能3. 短信登录-实现短信验证码登录和注册功能4. 短信登录-实现登录校验拦截器5. 短信登录-隐藏用户敏感信息6. 短信登录-session共享的问题分析7. 短信登录-Redis代替s…

大疆Action3视频导出卡顿原理及解决方案分析

前言 最近调休出去游玩了一下&#xff0c;用 大疆的Action3 做了一些游玩记录。晚上回来高高兴兴准备导出视频开始剪辑了&#xff0c;结果…出幺蛾子&#xff0c;导出到手机上的的二十多个素材全部都是以慢动作的方式回放的&#xff0c;但是在Action3 中观看是正常的。所以立马…

软件无线电系列——带通信号采样定理

本节目录 一、带通信号采样定理 1、带通信号采样定理的定义 2、带通信号采样定理的证明本节内容 一、带通信号采样定理 1、带通信号采样定理的定义 Nyquist采样定理是对频谱分布在(0,fH)上的基带信号的采样分析的&#xff0c;如果信号的频谱分布在某一限定的频带(fL,fH)上&…

修改/etc/resolve.conf重启NetworkManager之后自动还原

我ping 百度报错&#xff1a; [rootk8snode1 ~]# ping baidu.com ping: baidu.com: Name or service not known很明显&#xff0c;这是DNS解析问题。 于是我修改 /etc/resolv.conf 文件后&#xff0c;执行完sudo systemctl restart NetworkManager&#xff0c;/etc/resolv.con…

课堂:Apriori + 关联规则

一&#xff0e;小结 本小节主要是学习关联规则&#xff0c;但是学习这个之前&#xff0c;我们要学习Apriori算法求的频繁集。 二&#xff0e;实操演示 &#xff08;1&#xff09;处理数据集 导入数据 #导入数据 import pandas as pd path C:\\Users\\chxy\\Desktop\\dat…

AndroidLinux GPIO控制方法

目录 1 GPIO整体架构 2 user space 层 gpio使用方法 2.1 sysfs控制方法 2.1.1 kernel版本区别 2.1.2 /sys/class/gpio 2.1.3 /sys/bug/gpio/devices 2.2 chardev控制方法 2.2.1 chardev 示例代码 2.2.2 示例代码主要步骤描述 2.2.3 include/linux/gpio.h 全部代码 2.3…

海格里斯HEGERLS托盘搬运机器人四向车引领三维空间集群设备柔性运维

随着市场的不断迅猛发展变化&#xff0c;在物流仓储中&#xff0c;无论是国内还是海外&#xff0c;都对托盘式解决方案需求量很大。顾名思义&#xff0c;托盘式解决方案简单理解就是将产品放置在托盘上进行存储、搬运和拣选。 面对托盘式方案需求&#xff0c;行业中常见的方案是…

【Unity】进度条和血条的三种做法

前言 在使用Unity开发的时候&#xff0c;进度条和血条是必不可少的&#xff0c;本篇文章将简单介绍一下几种血条的制作方法。 1.使用Slider Slider组件由两部分组成&#xff1a;滑动区域和滑块。滑动区域用于显示滑动条的背景&#xff0c;而滑块则表示当前的数值位置。用户可…

Java面试——SQL 语句题

优质博文&#xff1a;IT-BLOG-CN 一、行转列问题 现有表格A&#xff0c;按照以下格式排列&#xff1b; 姓名收入类型收入金额Tom年奖金5wTom月工资10kJack年奖金8wJack月工资12k 先需要将表格转化为&#xff1a; 姓名月工资年奖金Tom10k50kJack12k80k 方法一&#xff1a;…

力扣111---二叉树的最小深度(简单题,Java,递归+非递归)

目录 题目描述&#xff1a; &#xff08;递归&#xff09;代码&#xff1a; &#xff08;非递归、层次遍历&#xff09;代码&#xff1a; 题目描述&#xff1a; 给定一个二叉树&#xff0c;找出其最小深度。 最小深度是从根节点到最近叶子节点的最短路径上的节点数量。 说…

C语言-strstr(字符串里查找字符串)

strstr&#xff08;字符串里查找字符串&#xff09; 语法格式 库函数实现的逻辑 1&#xff0c;返回一个指向str2在str1中第一次出现的位置&#xff0c;如果str2不是p&#xff0c;则返回一个空指针&#xff0c;函数返回字符串str2在字符串str1中第一次出现的位置) 2&#xf…

layuiAdmin-通用型后台模板框架【广泛用于各类管理平台】

1. 主页 1.1 控制台 2. 组件 3. 页面 3.1 个人主页 3.2 通讯录 3.3 客户列表 3.4 商品列表 3.5 留言板 3.6 搜索结果 3.7 注册 3.8 登入 3.9 忘记密码 4. 应用 4.1 内容系统 4.1.1 文章列表 4.1.2 分类管理 4.1.3 评论管理 4.2 社区系统 4.2.1 帖子列表 4.2.2 回…