2

我在带有 jQ​​uery 切换代码的​​隐藏 div 中遇到了 Google Map 的问题。

这是现场示例： http: //provaeur.altervista.org/13.11/

当我在“DOVE”面板上单击几次（.dove与.dovecart地图所在的位置相关）时，地图的行为很奇怪。我在互联网上找到了事件触发解决方案（google.maps.event.trigger(map, "resize")），但我无法适用于我的情况......有人可以帮助我吗？

PS：对不起，我的英语不好。

FIRTS JS 代码——切换 

<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()s。我已将它们合并为一个并添加了 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 回答