Google Maps API и JQuery Slide Toggle неправильно инициализируют карту - PullRequest
Новая
       1

Google Maps API и JQuery Slide Toggle неправильно инициализируют карту

1 голос
/ 14 декабря 2011

У меня проблема с инициализацией API карт Google.Когда у меня есть API карты в обычном div, который настроен для отображения, он работает отлично и переключается вверх и вниз, но когда я устанавливаю отображение на none, он не загружается правильно.Карта загружается только наполовину, и изображение булавки не отображается.Есть ли обходной путь для этого или это просто не будет работать на слайде-переключателе, который изначально не отображается.

Пример страницы, которую я создал, показан ниже. 

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type='text/javascript' src='scripts/jscripts/jquery-1.4.js'></script>

<style type="text/css">
.slideTogglebox{
    float:left;
    padding:8px;
    margin:16px;
    border:1px solid red;
    width:500px;
    height:350px;
    background-color:#000000;
    color:white;
    display:none;
}
.clear{
    clear:both;
}
</style>

</head>

<body>
<?php
$url ="http://maps.googleapis.com/maps/api/geocode/xml?address=PL329YN&sensor=false";
$getAddress = simplexml_load_file($url);
$lat = $getAddress->result->geometry->location->lat;
$lng = $getAddress->result->geometry->location->lng;
?>

<div class="clear">
<h3>slideToggle() example</h3> <a href="javascript:slideToggle()" id=slideToggle>Click Me</a>
<br/>
<div class="slideTogglebox" id='map_canvas'>

</div>

</div>

<script type="text/javascript">

function initialize() {

    <?php
    print "var lat = $lat;";
    print "var lng = $lng;";
    ?>

    var latlng = new google.maps.LatLng(lat, lng);
    var myOptions = {
        zoom: 10,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var image = 'images/map/pin_green.png';
    var myLatLng = new google.maps.LatLng(lat, lng);
    var beachMarker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: image
    });
}

var init = false;

$("#slideToggle").click(function () {

   if (!init) {
        initialize();
        init = true;
   }
   $('.slideTogglebox').slideToggle('slow');
});


</script>

Ответы [ 3 ]

0 голосов
/ 14 декабря 2011

Кажется, есть проблема с новыми v3 api и jquery. Похоже, что он работает с v2 API карт Google без проблем.

Поэтому, чтобы исправить проблему, я вызвал функцию initialize после переключения div. Затем я установил фон в CSS так, чтобы он соответствовал фону на странице, чтобы после переключения он исчезал. 

<script type="text/javascript">

$("#slideToggle").click(function () {

   $('.slideTogglebox').slideToggle(function initialize() {

        <?php
        print "var lat = $lat;";
        print "var lng = $lng;";
        ?>

        var latlng = new google.maps.LatLng(lat, lng);
        var myOptions = {
            zoom: 10,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        var image = 'images/map/pin_green.png';
        var myLatLng = new google.maps.LatLng(lat, lng);
        var beachMarker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            icon: image
        });
    });
});


</script>
0 голосов
/ 23 апреля 2013

Вы также можете просто анимировать CSS (непрозрачность, высота) без использования дополнительного обратного вызова в JS. Работает как шарм. Пока в блоке, содержащем карту, отображается блок, с этим методом все в порядке.

0 голосов
/ 14 декабря 2011

Казалось бы кажется ответ может быть простым.Инициализируйте карту только тогда, когда div, который должен содержать карту, виден.Поместите обратный вызов в проверку вызова .slideToggle() e, если div видим и карты нет.Если это так, загрузите карту (возможно, вы захотите отключить действия, связанные с событием щелчка, во время загрузки карты).Вы также можете подумать о том, чтобы сделать map_canvas дочерним элементом объекта slideToggleBox (вместо самого slideToggleBox) на тот случай, если это повлияет на реакцию карты и т. Д.Вы уже добавляете событие клика через jQuery?

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

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

...