鸿蒙ArkTS怎样接入舆图【已解决】
题目描述用鸿蒙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: ,
});
}
// 标记所有地点
function AllMapMaker() {
for (let i = 0; i < locations.length; i += 1) {
MapMaker(locations.coordinates, i, locations.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],
title: name,
offset: new AMapStore.AMapBox.Pixel(-13, -30),
})
);
let infoWindow; // 声明 infoWindow 变量以便在点击地图时进行访问
// 添加标记点击事件监听器
AMapStore.marker.on("click", () => {
// 如果之前有打开的信息窗体，则先关闭
if (infoWindow) {
infoWindow.close();
}
// 创建信息窗体
infoWindow = new AMapStore.AMapBox.InfoWindow({
content: `<div style="max-width: 300px;">${locations.details}</div>`,
offset: new AMapStore.AMapBox.Pixel(40.15, -42),
zIndex: 1000,
});
// 打开信息窗体
infoWindow.open(AMapStore.map, AMapStore.marker.getPosition());
});
// 添加地图点击事件监听器
AMapStore.map.on("click", () => {
// 关闭信息窗体
if (infoWindow) {
infoWindow.close();
}
});
AMapStore.map.add(AMapStore.marker);
}
// 初始化一切
async function init() {
await LoaderMap();
await createMap();
await AllMapMaker();
}
init();
</script>
</body>
</html>
2. 安置HTML文件
在resources下创建rawfile文件夹，将html文件放入即可
https://i-blog.csdnimg.cn/blog_migrate/d5c6a472d9536c39d7ea6a02aa510ada.png
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"
}
],
......
}
}
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]