0

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

另外，如果有人知道我也有谷歌地图问题的解决方案，请告诉我，因为当您显示/向下滑动时，制作的内容是隐藏的，它不会显示大部分地图（关于调整大小的事情我想我记得阅读过)

我在这里做了一个 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>

地图 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>
4

2 回答 2

0

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

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

});

});
于 2013-07-11T14:40:42.070 回答
0

我看了看你的小提琴，它必须清洗。根据我的理解，您正在尝试点击toggle谷歌地图button。

小提琴中的错误：

(1) 谷歌地图未初始化。下面用于初始化谷歌地图。

 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，请仔细阅读并分享您的想法。

于 2013-07-11T13:37:20.510 回答