将带有透明背景的地图放在另一张地图上答案

【问题标题】：Place map with transparent bg over another one将带有透明背景的地图放在另一张地图上
【发布时间】：2011-07-12 13:11:53
【问题描述】：

我希望将一张地图放在另一张地图上，这样我就可以在不影响道路和标签颜色的情况下使一张“卫星视图”地图变暗。我希望它看起来像这样： http://pixfx.at/#Map

所以我拿了他们的一些代码，让它看起来像这样：

<style type="text/css">
#map {
height:543px !important;
background-image:url(../images/background_gradient_transparent.png);
background-repeat:repeat-x;
border-top:1px solid #cccccc;
border-bottom:1px solid #666666;
margin:5px 0px 5px 0px;
overflow:hidden !important;
}

#map_canvas {
height:543px !important;
background-color:transparent !important;
overflow:hidden !important;
}

#map_canvas .terms-of-use-link {
display:none;
}

</style>




<script type="text/javascript">



    var map = new GMap2(document.getElementById("map_canvas"));

    map.setCenter(new GLatLng(47.254072, 11.445657), 13);

    map.setMapType(G_HYBRID_MAP);
    /*
    map.removeMapType(G_NORMAL_MAP);
    map.removeMapType(G_HYBRID_MAP);
    map.removeMapType(G_SATELLITE_MAP);
    map.removeMapType(G_PHYSICAL_MAP);
    */
    //map.getDragObject().setDraggableCursor("move");
    map.enableDoubleClickZoom();
    map.enableContinuousZoom();
    map.enableScrollWheelZoom();
    map.enableDragging();

    }

    function loadScript() {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
    document.body.appendChild(script);




    jQuery('#map_canvas > div > div > div > div').each( function () {

        if(jQuery(this).css('zIndex') == '0')
        {
            jQuery(this).find('img').each( function() {
                jQuery(this).css({ opacity: '0.25' });
            });
        }

    });

    jQuery('#map_canvas > .gmnoprint').css({ display: 'none' });


            }

            window.onload = loadScript;
            </script>

            </head>



            <body>



            <div id="map">
            <div id="map_canvas" style="width:100%; height:100%;"></div>
            </div>

虽然问题是地图不显示。

【问题讨论】：

标签： javascript css google-maps-api-3

【解决方案1】：

您提供的代码无效。

map.enableDragging();

} //<-- this bracket is unmatched

function loadScript() {

另外，这一行：var map = new GMap2(document.getElementById("map_canvas")); 使用了一个未知项目。错误的 API 使用/缺少链接？

至于您的 CSS，对两个画布使用自定义图片，我看到 #map_canvas 正确地超过了 #map。

您的问题出在您的 javascript 中：您没有正确使用 google map API。我稍微更改了您的代码，但 GMap2 仍未定义...

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&callback=initialize"></script>
<script type="text/javascript">
    jQuery(document).ready(function() {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(47.254072, 11.445657), 13);
        map.setMapType(G_HYBRID_MAP);
        map.enableDoubleClickZoom();
        map.enableContinuousZoom();
        map.enableScrollWheelZoom();
        map.enableDragging();

        jQuery('#map_canvas > div > div > div > div').each( function () {
            if(jQuery(this).css('zIndex') == '0')
            {
                jQuery(this).find('img').each( function() {
                    jQuery(this).css({ opacity: '0.25' });
                });
            }
        });
        jQuery('#map_canvas > .gmnoprint').css({ display: 'none' });
    });
            </script>

由于 Google Map API v2 已弃用，您应该切换到版本 3。

另外，您需要Sign up for a Google Maps API key。否则 Google 会阻止您。

转到here 并按照说明进行操作。 :)

【讨论】：

啊，谢谢！我绝对想把它移植到 v3。如果我在 v3 中这样做，我将如何将一个放在另一个之上？我必须创建 2 个地图（var map1、map2）吗？
不知道，但可能（然后修改顶部的不透明度），祝你好运！
@pafAmuf 我认为在下一行 map.setMapType(G_HYBRID_MAP); 中设置的混合地图类型会为您解决问题（将一张地图放在另一张地图上）。我想在 V3 中会有类似的东西。但这可能意味着如果 Google maps HTML 布局自 V2 以来发生了变化，您将不得不调整 JQuery 代码。
@Kraz：第 3 版 Gmaps API 不再需要使用 API 密钥，或者文档似乎建议这样做。