带有 jQuery 切换的 Google Maps Api v3答案

【问题标题】：Google Maps Api v3 with jQuery toggle带有 jQuery 切换的 Google Maps Api v3
【发布时间】：2012-11-13 10:39:49
【问题描述】：

我在使用 jQuery 切换代码的隐藏 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>

【问题讨论】：

应该initialize() 不在$(".dove").click(function() {..} 中而不是onClick 中？
有可能，结果是一样的。

标签： google-maps-api-3 show-hide jquery

【解决方案1】：

我查看了您的源代码。您有多个$(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()

【讨论】：