Au cours du processus de développement du méta-service, vous devrez peut-être utiliser la carte dans l'application. Si vous utilisez la méthode d'intégration SDK, la taille du package SDK de la carte est très importante. Après l'intégration, la taille du méta-service peut dépasser 10 M , qui dépasse la limite de taille du package HAP. . Existe-t-il un autre moyen d'utiliser les cartes dans les méta-services ? L'auteur a récemment découvert en étudiant les documents de méta-service de développement low-code récemment lancés par AGC que son modèle de spot panoramique ( introduction du modèle - méta-service de développement basé sur un modèle - méta-service de développement de plate-forme low-code -AppGallery Connect Help Center | Huawei Developer Alliance (huawei .com) intègre des cartes mais n'importe pas de cartes via le SDK et utilise WebView + local html + Tencent Javascript API GL pour implémenter des cartes. Laissez-moi vous parler du processus d'implémentation spécifique.
[Tencent Maps Javascript API GL]
Tout d'abord, nous avons trouvé le document Javascript API GL JavaScript API | Tencent Location Service (qq.com) sur le site officiel de Tencent Maps .
1. Nous devons enregistrer un compte et créer une application et une clé sur la console, puis exécuter la démo pour voir si la carte peut être chargée normalement.
2. Ici, nous copions le code de l'exemple dans le fichier nouvellement créé demo.html et plaçons le fichier demo.html dans le répertoire des ressources du projet HarmonyOS (entry/src/main/resources/rawfile/). Remplacez la clé appliquée ci-dessus dans l'exemple de code <script src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script > la clé ici
<!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. Il convient de noter que Tencent Maps ne prend plus en charge file:// pour utiliser Javascript API GL , nous ne pouvons donc pas utiliser cette API JS pour charger ce fichier html local via WebView dans Android
webView.loadUrl("file:///android_asset/demo.html");
Cela signifie-t-il que nous sommes impuissants dans HarmonyOS ?
Étonnamment, pour des raisons de sécurité, WebView dans HarmonyOS ne prend pas en charge le chargement de fichiers de ressources ou de fichiers locaux directement via le protocole File. Mais vous pouvez charger des fichiers html locaux en chargeant des adresses https ou http, comme suit :
webView.load("https://example.com/rawfile/example.html");
Cela a exactement résolu notre problème.
[WebView charge le Html local]
Avant de charger la carte, nous devons terminer les paramètres d'autorisation du projet. L'application utilise une carte Web, de sorte que l'autorisation réseau doit être demandée comme suit :
"reqPermissions": [
{
"name": "ohos.permission.INTERNET",
"mergeRule": {
"remove": [
"reason"
]
}
}
]Ensuite, ce que nous devons réaliser, c'est que WebView charge le Html local. Sur le site officiel, nous pouvons trouver des méthodes pour charger les fichiers de ressources et les fichiers locaux ( WebView - conseils de développement de composants communs - Java UI framework - UI - Java - développement basé - développement - Développement d'applications HarmonyOS )
Ici, le fichier est accessible via la méthode processResourceRequest. Le code spécifique est le suivant :
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);
}
});Enfin, nous chargeons le fichier local demo.html par load
webView.load("https://com.example.javawebmap/rawfile/demo.html");
【résultat en cours】
Enfin, nous pouvons voir l'effet de la course
Si nous devons développer davantage ou interagir avec la carte, nous pouvons utiliser la méthode webView.addJsCallback, qui est également incluse dans les instructions d'utilisation de WebView ci-dessus. Jusqu'à présent, nous avons terminé le chargement de cartes simples via WebView et Tencent Maps Javascript API GL.
【Article de référence】
Introduction aux modèles - Développement de métaservices basés sur des modèles - Développement de métaservices sur des plates-formes low-code - Centre d'aide AppGallery Connect | HUAWEI Developer Alliance (huawei.com)
WebView - guide de développement de composants communs - Framework Java UI - UI - Développement basé sur Java - Développement - Développement d'applications HarmonyOS
API JavaScript | Service de localisation Tencent (qq.com)
Pour des articles techniques plus complets, veuillez visiter https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh