首次编写代码遇阻：如何叠加Google Maps静态栅格图层？

你的代码存在两个核心问题：

1. HTML标签语法错误：两个<img>标签均未正确闭合，alt、style属性被错误放置在第二个标签外部，导致浏览器解析混乱。
2. 叠加逻辑错误：单纯并列<img>标签只会让图片上下排列，无法实现图层叠加，需要通过CSS定位让两张图重叠，再调整透明度实现地形+道路的混合显示。

修正后的代码 #

<!DOCTYPE html> 
<html>
<head>
    <title>My first Code Google Map</title>
    <style>
        .map-container {
            position: relative;
            width: 512px;
            height: 512px;
        }
        .map-layer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .road-layer {
            /* 调整透明度，让地形图层透过道路显示 */
            opacity: 0.7;
        }
    </style>
</head>
<body>
    <h1>My first Code Google Map</h1>

    <div class="map-container">
        <!-- 地形图层作为底层 -->
        <img 
            src="https://maps.googleapis.com/maps/api/staticmap?center=57.70886926817119,11.984633616007413&zoom=13&size=512x512&maptype=terrain&markers=color:blue%7Clabel:L%7C57.70886926817119,11.984633616007413&key=myAPIkey"
            alt="Google Map Terrain"
            class="map-layer"
        >
        <!-- 道路图层作为上层，设置透明度 -->
        <img 
            src="https://maps.googleapis.com/maps/api/staticmap?center=57.70886926817119,11.984633616007413&zoom=13&size=512x512&maptype=roadmap&markers=color:blue%7Clabel:L%7C57.70886926817119,11.984633616007413&key=myAPIkey"
            alt="Google Map Roadmap"
            class="map-layer road-layer"
        >
    </div>
</body>
</html>

关键说明 #

• 用position: relative的容器包裹两张图，让内部绝对定位的图层以容器为基准对齐。
• 两张图设置position: absolute并将top、left设为0，实现完全重叠。
• 调整道路图层的opacity值（范围0-1），可控制道路与地形的混合程度，你可以根据需求修改该值。
• 修正了所有HTML标签的闭合问题，确保浏览器正确解析。

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