用鸿蒙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"}],......}
}
- 在模拟机运行