谷歌地圖API和JQuery幻燈片切換不正確地初始化地圖

我遇到的問題是谷歌地圖API的初始化。當我在正常div中設置爲顯示的地圖api時，它可以完美工作，並可以上下切換，但是當我將顯示設置爲none時，它無法正確加載。地圖只加載一半，不顯示圖釘圖像。是否有解決此問題的方法，或者僅僅在最初沒有顯示的切換幻燈片中才起作用。谷歌地圖API和JQuery幻燈片切換不正確地初始化地圖

我創建的示例頁面如下所示。

<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>

來源

2011-12-14 aHunter

新的v3 api和jquery似乎有問題。它似乎與谷歌地圖api的v2沒有問題。

因此，要解決問題，我已經調用了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>

來源

2011-12-14 17:12:25 aHunter

這將似乎答案可能是簡單的。僅當要包含地圖的div可見時才初始化地圖。將回調放入.slideToggle()調用檢查e如果div可見並且沒有地圖。如果是這樣，請加載地圖（您也可以在加載地圖時禁用點擊事件操作）。您還可能想考慮將map_canvas作爲slideToggleBox的子元素（而不是slideToggleBox本身），以防影響地圖如何起作用等。

順便說一下，當您已經添加了一個圖形時，是什麼點擊事件通過jQuery？

來源

2011-12-14 16:07:01 JayC

您也可以在不使用額外的js回調的情況下爲css（不透明度，高度）設置動畫。奇蹟般有效。只要包含地圖的div顯示爲block，您就可以使用此方法。

來源

2013-04-23 16:28:25 Timo

谷歌地圖API和JQuery幻燈片切換不正確地初始化地圖

回答

相關問題