FusionTablesLayer скрывает основную карту на странице WordPress - PullRequest
Новая
       33

FusionTablesLayer скрывает основную карту на странице WordPress

1 голос
/ 21 января 2012

Я хотел бы отобразить карту Google с двумя слоями таблиц Fusion. Приведенный ниже код отлично работает, если я просто скопирую его в текстовый редактор, сохраню файл как map.html и открою его в своем браузере. Но когда я помещаю это в пост на своем WordPress-тематическом сайте, основная карта скрывается слоями Fusion Tables. Эти слои не являются полностью непрозрачными: я могу видеть их оба одновременно. Я просто не вижу основной карты.

Всякий раз, когда я масштабирую или панорамирую карту, базовая карта появляется на короткое время, прежде чем слои Fusion Tables будут нарисованы поверх нее. Я подозреваю, что виновата установка стиля. Знаете ли вы, как правильно отобразить карту?

Я использую WordPress версии 3.0.4 с темой Gazette от woothemes; сайт http://www.wisconsinwatch.org.

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
 
<div id="gmap" style="width:590px; padding-top:40px;height: 550px;">
    <script type="text/javascript">
        var fracmap = new google.maps.Map(document.getElementById('gmap'), {
            center: new google.maps.LatLng(44.797709533120106, -90.43712582444374),
            zoom: 7,
            mapTypeId: 'hybrid'
        });
        var layer0 = new google.maps.FusionTablesLayer({
            query: {
                select: 'geometry',
                from: 2695847
            },
        });
        layer0.setMap(fracmap);
        var layer1 = new google.maps.FusionTablesLayer({
            query: {
                select: 'geometry',
                from: 2695779
            },
        });
        layer1.setMap(fracmap);
    </script>
</div>

Спасибо!

1 Ответ

1 голос
/ 21 января 2012

Wordpress упаковывает содержимое вашего поста в блок <div class="entry">, который используется вашей темой для обеспечения правильного оформления.Поскольку javascript, который подготавливает карту Google для отображения, возвращает изображение, соответствующая часть таблицы стилей Gazette выглядит следующим образом: 

.entry img {
    padding: 4px;
    border: 1px solid #dddddd;
    background-color: #FFFFFF;
    }

В частности, настройка background-color приводит к тому, что наложенные слои таблиц Fusion будут отображатьсянепрозрачный фон, который затем скрывает основную карту.Вам нужно определить новый класс в вашей таблице стилей (назовем его «карта»), который рисует изображения с прозрачным фоном: 

.map img {
    background-color: transparent;
    }

, а затем обернуть ваш javascript в блок <div class="map">, вот так: 

<div class="map">               
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <div id="gmap" style="width:590px; padding-top:40px;height: 550px;">
    <script type="text/javascript">
    var fracmap = new google.maps.Map(document.getElementById('gmap'), 
        center: new google.maps.LatLng(44.797709533120106, -90.43712582444374),
            zoom: 7,
            mapTypeId: 'hybrid'
            });
            var layer0 = new google.maps.FusionTablesLayer({
                query: {
                select: 'geometry',
                from: 2695847
            },
        });
        layer0.setMap(fracmap);
        var layer1 = new google.maps.FusionTablesLayer({
            query: {
                select: 'geometry',
                from: 2695779
            },
        });
        layer1.setMap(fracmap);
    </script>
    </div>
</div>
...