During the meta-service development process, you may need to use the map in the application. If you use the SDK integration method, the size of the map SDK package is very large. After the integration, the meta-service size may exceed 10M, which exceeds the size limit of the HAP package. . So is there any other way to use maps in meta services? The author recently discovered while studying the low-code development meta-service documents newly launched by AGC that his scenic spot template ( template introduction - template-based development meta-service - low-code platform development meta-service -AppGallery Connect Help Center | Huawei Developer Alliance (huawei .com) ) integrates maps but does not import maps through SDK, and uses WebView+local html+Tencent Javascript API GL to implement maps. Let me tell you about the specific implementation process.
[Tencent Maps Javascript API GL]
First of all, we found the Javascript API GL document JavaScript API | Tencent Location Service (qq.com) on the official website of Tencent Maps .
1. We need to register an account and create an application and key on the console, and then run the demo to see if the map can be loaded normally.
2. Here we copy the code in the example to the newly created file demo.html, and place the demo.html file in the resource directory of the HarmonyOS project (entry/src/main/resources/rawfile/). Replace the key applied above in the sample code <script src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script > the key here
<!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. It should be noted that Tencent Maps no longer supports file:// to use Javascript API GL , so we cannot use this JS API to load this local html file through WebView in Android
webView.loadUrl("file:///android_asset/demo.html");
Does that mean we are helpless in HarmonyOS?
Surprisingly, for security reasons, WebView in HarmonyOS does not support loading resource files or local files directly through the File protocol. But you can load local html files by loading https or http addresses, as follows:
webView.load("https://example.com/rawfile/example.html");
This exactly solved our problem.
[WebView loads local Html]
Before loading the map, we need to complete the permission setting of the project. The application uses a web map, so the network permission needs to be applied for as follows:
"reqPermissions": [
{
"name": "ohos.permission.INTERNET",
"mergeRule": {
"remove": [
"reason"
]
}
}
]Then what we need to realize is that WebView loads local Html. On the official website, we can find methods to load resource files and local files ( WebView- common component development guidance -Java UI framework -UI- Java - based development - development -HarmonyOS application development )
Here, the file is accessed through the processResourceRequest method. The specific code is as follows:
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);
}
});Finally, we load the local demo.html file by load
webView.load("https://com.example.javawebmap/rawfile/demo.html");
【running result】
Finally, we can see the effect of running
If we need to further develop or interact with the map, we can use the webView.addJsCallback method, which is also included in the above WebView usage instructions. So far we have completed the simple map loading through WebView and Tencent Maps Javascript API GL.
【Reference article】
Introduction to Templates - Developing Metaservices Based on Templates - Developing Metaservices on Low-Code Platforms -AppGallery Connect Help Center | HUAWEI Developer Alliance (huawei.com)
WebView- common component development guide -Java UI framework -UI- Java - based development - Development -HarmonyOS application development
JavaScript API | Tencent Location Service (qq.com)
For more comprehensive technical articles, please visit https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh