Question

我希望将一张地图放在另一张地图上，这样我就可以将一张“卫星视图”地图变暗，而不会影响道路和标签的颜色。我希望它看起来像这样： 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>

虽然问题是地图没有显示。

Answer 1

您提供的代码无效。

map.enableDragging();

} //<-- this bracket is unmatched

function loadScript() {

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

对于CSS，使用两个画布的自定义图片，我看到#map_canvas正确地在#map上。

您的问题出在您的javascript中：您没有正确使用Google地图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。否则谷歌阻止你。

转到here并按照说明操作。：）

将透明bg的地图放在另一个地图上

1 个答案: