Flutter官方WebView加载本地HTML时Leaflet地图无法加载如何解决

排查项 #

• 检查pubspec.yaml资产声明配置：确认你已经在flutter节点下声明了本地HTML所在的目录，示例配置如下：

flutter:
  assets:
    - assets/htmls/
    # 若Leaflet的js、css等资源也存放在本地，需同步声明对应资源目录
    # - assets/js/
    # - assets/css/

• 检查_loadHtmlFromAssets方法实现：你贴出的代码中只调用了该方法但没有给出实现，错误的加载方式会导致本地资源路径解析失败，正确实现参考下文。
• 检查Android网络限制：Android 9及以上系统默认禁止明文HTTP请求，若你使用的Leaflet瓦片源为HTTP协议，会被系统拦截；同时默认也禁止HTTPS和HTTP混合内容加载。
• 打开WebView调试定位具体报错：在Android项目的MainActivity的onCreate方法中添加WebView.setWebContentsDebuggingEnabled(true)，手机连接电脑后打开Chrome访问chrome://inspect，即可查看WebView控制台的具体报错，判断是资源404、JS异常还是网络请求被拦截。

具体解决方法 #

1. 修正本地HTML加载逻辑 #

正确的_loadHtmlFromAssets实现如下，注意baseUrl参数需要和你本地资源的相对路径匹配：

import 'package:flutter/services.dart';
import 'dart:io';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:webview_flutter_android/webview_flutter_android.dart';

Future<void> _loadHtmlFromAssets() async {
  String fileContent = await rootBundle.loadString(filePath);
  // 允许文件访问
  await _wvc.setAllowFileAccess(true);
  // 安卓端允许混合内容加载
  if (Platform.isAndroid) {
    final androidController = _wvc.platform as AndroidWebViewController;
    await androidController.setMixedContentMode(AndroidMixedContentMode.mixedContentAlwaysAllow);
  }
  // 加载HTML，baseUrl根据你本地资源的存放路径调整
  await _wvc.loadHtmlString(
    fileContent,
    baseUrl: 'file:///android_asset/flutter_assets/assets/htmls/',
  );
}

2. 配置Android网络安全策略 #

在安卓项目的res/xml目录下新建network_security_config.xml文件，内容如下：

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <!-- 替换为你实际使用的Leaflet瓦片服务域名 -->
        <domain includeSubdomains="true">tile.openstreetmap.org</domain>
    </domain-config>
</network-security-config>

随后在AndroidManifest.xml的application标签中添加配置引用：

<application
    android:networkSecurityConfig="@xml/network_security_config"
    ... 其余配置保持不变
>

3. 检查本地HTML中的Leaflet资源路径 #

确认HTML中引用的Leaflet的js、css文件路径正确，若使用本地存放的Leaflet资源，路径要和asset目录结构对应。

内容的提问来源于stack exchange，提问作者Vamshi