Question

我在解决如何使这个切换工作时遇到问题，默认情况下它会隐藏地图，当你点击显示地图时我希望地图向下滑动并更改链接测试以隐藏地图然后当然会向后滑动但似乎没有工作.....任何人有任何想法？

此外，如果有人知道谷歌地图问题的解决方案我也请让我知道，因为制作是隐藏当你显示/向下滑动它没有显示大部分的地图（关于调整大小我认为我记得阅读）

我在这里做了一个jsfiddle：http://jsfiddle.net/DfVBb/虽然由于某种原因根本不起作用。提前谢谢！

HTML

<div class="slideToggleBox">
  <div id="map_div">&nbsp;</div>
 </div>
<a href="#" id="slideToggle">show map</a>

JS

<script type="text/javascript">
  $('#map_div').hide();
  $('#slideToggle').click(function() {
    $('#map_div').slideToggle('slow', function() {
      $('#slideToggle').text('hide map');
    }, function(){
      $('#slideToggle').text('show map');
    });
    return false
});
</script>

Maps JS

$(document).ready(function() {
  var latlng = new google.maps.LatLng(53.334583, -0.961674);
  var options = {  
    zoom: 15, // This number can be set to define the initial zoom level of the map
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };  
  var map = new google.maps.Map(document.getElementById('map_div'), options);  
  var image = new google.maps.MarkerImage('/images/map-icon.png',
    new google.maps.Size(680, 178),
    new google.maps.Point(0,0),
    new google.maps.Point(18, 50)
  );
  var marker1 = new google.maps.Marker({
  position: new google.maps.LatLng(53.334583,-0.961674), 
  map: map,     
  icon: image
  });   
});
</script>

Answer 1

我看着你的小提琴，它必须要清理干净。根据我的理解，您在toggle点击后尝试button Google地图。

小提琴中的错误：

（1）Google地图未初始化。以下内容用于初始化Google地图。

 google.maps.event.addDomListener(window, 'load', initialize);

（2）您的.slideToggle()必须清理干净。它有点像

$('#slideToggle').on('click', function () {
    $('#map_canvas').slideToggle('slow', function () {
        if ($('#slideToggle').text() !== "hide map") 
           $('#slideToggle').text('hide map');
        else 
           $('#slideToggle').text('show map');
    });
    return false;
});

我已创建JSFiddle，请仔细阅读并分享您的想法。

Answer 2

我设法为此制定解决方案并修复调整大小问题

$(function () {
  // create a center
  var c = new google.maps.LatLng(53.334583, -0.961674);

  //create map options object
  var mapOptions = {
    zoom: 14,
    center: c,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
  $("#slideToggle").click(function () {
    $('#map_canvas').slideToggle(300, function(){
    if ($('#slideToggle').text() !== "hide map") $('#slideToggle').text('hide map');
    else $('#slideToggle').text('show map');
    google.maps.event.trigger(map, "resize"); // resize map
    map.setCenter(c); // set the center
  }); // slide it down

});

});

jquery链接切换与谷歌地图

2 个答案: