如何在WebView中渲染谷歌地图的JavaScript标记？标记不显示如何解决

API 探路者

2026-9-23

解决方案

你当前已经开启了JS、DOM存储等核心基础配置，可按以下步骤排查修复：

开启混合内容允许配置
Android 5.0及以上系统WebView默认禁止HTTPS页面加载HTTP资源，谷歌地图标记资源若存在混合内容场景会被拦截，需添加配置：

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    binding.webView.getSettings().setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
}

调整JS执行时机
标记无法渲染大多是因为注入标记的JS执行时，谷歌地图实例还未完成初始化。需要在WebViewClient的onPageFinished回调触发后，再执行添加标记的JS逻辑，也可以直接把标记渲染逻辑写在前端页面的地图初始化完成回调函数中。
开启跨域/本地资源访问权限
如果你的标记图标使用了本地资源或者跨域地址，需要添加对应权限配置：

// 允许访问文件/内容资源
binding.webView.getSettings().setAllowFileAccess(true);
binding.webView.getSettings().setAllowContentAccess(true);
// 允许跨域访问文件资源
binding.webView.getSettings().setAllowFileAccessFromFileURLs(true);
binding.webView.getSettings().setAllowUniversalAccessFromFileURLs(true);

新增JS日志排查问题
配置WebChromeClient打印JS控制台日志，可直接定位是否是JS逻辑报错、坐标非法、标记层级过低被覆盖等问题：

binding.webView.setWebChromeClient(new WebChromeClient() {
    @Override
    public boolean onConsoleMessage(ConsoleMessage consoleMessage) {
        Log.d("WebView_JS_LOG", consoleMessage.message() + " | 行号："
                + consoleMessage.lineNumber() + " | 源文件："
                + consoleMessage.sourceId());
        return super.onConsoleMessage(consoleMessage);
    }
});