2

jQueryトグルコードを使用した非表示のdivでのGoogleマップに問題があります。

ライブの例は次のとおりです：http：//provaeur.altervista.org/13.11/

「DOVE」パネル（マップのある場所に.dove関連）を数回クリックすると、マップの動作がおかしくなります。.dovecartインターネットでイベントトリガーソリューション（google.maps.event.trigger（map、 "resize"））を見つけましたが、自分の状況に適用できません...誰か助けてもらえますか？

PS：英語が下手で失礼します。

FIRTSJSCODE-トグル 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
  $(".homecart").hide();
  $(".storiacart").hide();
  $(".dovecart").hide();
  $(".prodotticart").hide();
  $(".contcart").hide();
  //toggle on a single class
  $(".dove").click(function() {
    $(".dovecart").slideToggle(1500);
    $(".storiacart").hide();
    $(".prodotticart").hide();
    $(".contcart").hide();
    $(".homecart").hide();
  });
});
</script>

---gmapの作成---

<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDol1rmSCdasx76c4TH0UkTpO7pdkzhjnw&sensor=false">
</script>
<script>
  var myCenter=new google.maps.LatLng(45.646938,11.301745);
  var marker;
  function initialize() {
    var mapProp = {
      center:myCenter,
      zoom:7,
      mapTypeId:google.maps.MapTypeId.ROADMAP
    };
    var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
    marker=new google.maps.Marker({
      position:myCenter,
      animation:google.maps.Animation.BOUNCE,
      icon:'immagini/punt.png'
    });
    marker.setMap(map);
    var infowindow = new google.maps.InfoWindow({
      content:"Veniteci a trovare!"
    });
    /*google.maps.event.trigger(map, "resize");*/
    google.maps.event.addListener(marker,'click',function() {
      map.setZoom(14);
      map.setCenter(marker.getPosition());
      infowindow.open(map,marker);
    });
  }
</script>
<body>
  <div id="wrapper">
    <header id="conthead">
      <div id="headup"></div>
      <nav id="menu">
        <ul>
          <li class="home"><a href="#">Home</a></li>
          <li class="storia"><a href="#">Storia</a></li>
          <li class="dove" onClick="initialize()"><a href="#">Dove...</a></li>
          <li class="prodotti"><a href="#">Prodotti</a></li>
          <li class="contatti"><a href="#">Contatti</a></li>
        </ul>
      </nav>
    </header>
    <section id="cart" class="dovecart">
      <div id="hcart"></div>
      <div id="bodycart">
        <div id="googleMap" style="width:500px;height:300px;"></div>
      </div>
    </section>
4

1 に答える 1

0

私はあなたのソースコードを見ました。複数$(document).ready(function()のがあります。それらを1つに組み込み、initialize（）をapri()に追加しました$(".dovecart").hide();。

function apri(){
initialize();
$(".homecart").hide();
$(".dovecart").hide();
$(".homecart").slideToggle(1500);
}

$(document).ready(function()
{
  $(".home").click(function()
  {
    $(".homecart").slideToggle(1500);
$(".storiacart").hide();
    $(".dovecart").hide();
    $(".prodotticart").hide();
    $(".contcart").hide();
  });
  $(".storia").click(function()
  {
    $(".storiacart").slideToggle(1500);
$(".dovecart").hide();
    $(".prodotticart").hide();
    $(".contcart").hide();
    $(".homecart").hide();
  });
  $(".dove").click(function()
  {
    $(".dovecart").slideToggle(1500);
$(".storiacart").hide();
    $(".prodotticart").hide();
    $(".contcart").hide();
    $(".homecart").hide();
    // added 
    initialize();
  });
  $(".prodotti").click(function()
  {
     $(".prodotticart").slideToggle(1500);
 $(".storiacart").hide();
     $(".dovecart").hide();
     $(".contcart").hide();
     $(".homecart").hide();
  });
  $(".contatti").click(function()
  {
    $(".contcart").slideToggle(1500);
$(".storiacart").hide();
    $(".dovecart").hide();
    $(".prodotticart").hide();
    $(".homecart").hide();
  });
});

編集

initialize()に追加$(".dove").click(function()

于 2012-11-13T17:37:22.203 に答える