Поместите карту с прозрачным bg поверх другого - PullRequest
Новая
       5

Поместите карту с прозрачным bg поверх другого

0 голосов
/ 12 июля 2011

Я планирую разместить одну карту поверх другой, чтобы я мог сделать одну карту "спутникового обзора" темной, не затрагивая цвет дорог и меток.Я хочу, чтобы это выглядело так: 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>

Хотя проблема в том, что карта недисплей.

1 Ответ

1 голос
/ 12 июля 2011

Код, который вы указали, недействителен. 

map.enableDragging();

} //<-- this bracket is unmatched

function loadScript() {

Также эта строка: var map = new GMap2(document.getElementById("map_canvas")); использовать неизвестный предмет. Неправильное использование API / отсутствует ссылка?

Что касается вашего CSS, используя пользовательские изображения для обоих холстов, я вижу, что #map_canvas больше, чем #map, правильно.

Ваша проблема заключается в вашем javascript: вы неправильно используете API Google Map. Я несколько изменил ваш код, но 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.

Кроме того, вам необходимо Зарегистрироваться для получения ключа API Карт Google . В противном случае Google блокирует вас.

Зайдите сюда и следуйте инструкциям. :)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...