自定义google.maps.MapType下WebGLOverlayView无法显示求助

问题根源 #

切换到自定义ImageMapType时，Google Maps的WebGL渲染上下文会因为基础地图类型变更而重置，导致WebGLOverlayView的渲染资源丢失，无法正常绘制内容。另外你当前的自定义MapType调用第三方瓦片地址后设置opacity:0，这种操作会干扰WebGL层的初始化逻辑。

方案一：修复自定义MapType适配WebGL #

调整自定义MapType的实现，确保兼容WebGL渲染：

• 用透明瓦片的Data URI替代第三方瓦片，避免不必要的网络请求和渲染干扰
• 保证MapType的缩放范围与地图完全匹配

修改后的代码：

const blankMapType = new google.maps.ImageMapType({
    getTileUrl(): string {
        // 返回1x1透明PNG的Data URI，无需加载外部资源
        return "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";
    },
    tileSize: new google.maps.Size(256, 256),
    opacity: 1.0, // 瓦片本身透明，此处设为1.0即可
    alt: "Blank Map",
    maxZoom: maxZoomLevel,
    minZoom: minZoomLevel,
    name: "None",
});

this.map.mapTypes.set("none", blankMapType);
this.map.setMapTypeId("none");

同时，你的WebGLOverlayView需要在上下文重置时重新初始化资源：

class CustomOverlay extends google.maps.WebGLOverlayView {
    onAdd() {
        // 初始化逻辑
    }

    onContextRestored(gl: WebGLRenderingContext) {
        // 重新创建着色器、缓冲区等WebGL资源
        this.initWebGLResources(gl);
    }

    draw(gl: WebGLRenderingContext) {
        // 绘制点和线的逻辑
    }
}

方案二：无需自定义MapType，快速实现空白/灰色背景 #

这是更简单的方案，无需创建自定义MapType，直接通过CSS隐藏原生瓦片层并添加自定义背景：

1. 隐藏地图的原生瓦片容器
2. 给地图容器设置灰色/空白背景

/* 隐藏Google Maps的瓦片层 */
.gm-style > div:first-child > div:nth-child(1) > div:nth-child(2) {
    display: none !important;
}

/* 设置地图容器背景色，可自定义为你需要的颜色 */
#map-container {
    background-color: #f0f0f0;
}

之后保持原有地图配置即可（比如使用roadmap作为基础MapType，CSS会自动隐藏它的瓦片），WebGLOverlayView的内容会正常显示在自定义背景上。

补充提醒 #

• 要完全空白背景就把background-color设为#ffffff，灰色背景可调整为其他灰度值
• Google Maps的DOM结构可能随版本更新变化，若CSS失效，可通过浏览器开发者工具重新定位瓦片容器的选择器
• 优先尝试方案二，实现简单且无兼容性问题

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