-1

好的，当按下链接视图地图时，我的网站 (http://www.security-vacancies.net/index.php) 上有一个滑动面板，滑动面板打开以显示 Google 地图。

我遇到的问题是 CSS 地图元素具有以下内容

 Display: none

当网页加载时，面板关闭，当我打开滑动面板时，地图无法正确显示，只显示一小段。现在我已经阅读了这个网站上的一些其他线程，这些线程解释了地图没有显示，因为显示没有显示。

当我删除显示元素时，地图显示完美，但当页面加载时，滑动面板处于打开位置。我尝试了几种不同的方法来找到解决方案，但我没有运气，想知道是否有人知道我如何解决这个问题。

谢谢

4

2 回答 2

1 
​$(document).ready(function(){
    $('#jobmap').on('click', '.slide', function(){
        $('#panel').slideToggle();
        $('#map').toggleClass('visible');
    });
});​

<style> #panel {display:none; height:600px; width:960px; background:#ccc;}#map {opacity:0; transition(all 0.4s linear); -webkit-transition(all 0.4s linear); -moz-transition(all 0.4s linear); -o-transition(all 0.4s linear);} #map.visible {opacity:1; transition(all 0.4s linear); -webkit-transition(all 0.4s linear); -moz-transition(all 0.4s linear); -o-transition(opacity 0.4s linear);}​&lt;/style>
于 2013-01-03T00:04:16.423 回答
0

我多次遇到这个问题。它以这种方式加载地图，因为您在它具有“显示：无”时启动它；并且 gmap 以画布大小 0:0 启动。

有两种方法可以解决它：

1) 用网站加载地图（不要在加载时使用“display: none;”）和 onready() 模拟点击隐藏地图的触发器（“查看工作地图”）。地图加载然后隐藏将在视觉上可见。

2) 不要在加载时启动地图。首次单击“查看工作地图”后启动地图。请记住将地图启动的地方保存并在之后检查它以避免每次触发“查看工作地图”时启动。

于 2013-01-02T23:28:08.123 回答