0

试图在一个页面上有几个 gmap，这些 gmap 位于隐藏的 div 中并被换出。第一张地图显示得很好，但所有后续地图在调用时都是部分灰色和偏离中心的。我看过很多这样的帖子，但没有一个解决方案有效 - 甚至 google.maps.event.trigger(map, "resize");

这就是我所拥有的。谢谢你的帮助。

function displayMap() {
document.getElementById('map_canvas').style.display="block";
initialize();}
function displayMap2() {
document.getElementById('map_canvas2').style.display="block";
initialize();}
function displayMap3() {
document.getElementById('map_canvas3').style.display="block";
initialize();}
function displayMap4() {
document.getElementById('map_canvas4').style.display="block";
initialize();
}
  function initialize() {
  var myLatlng = new google.maps.LatLng(39.924186, -75.297571);
  var myLatlng2 = new google.maps.LatLng(40.152785, -76.750233);
  var myLatlng3 = new google.maps.LatLng(39.962254, -75.605264);
  var myLatlng4 = new google.maps.LatLng(40.152785, -76.750233);
  var mapOptions = {
    zoom: 13,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var mapOptions2 = {
    zoom: 13,
    center: myLatlng2,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var mapOptions3 = {
    zoom: 13,
    center: myLatlng3,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var mapOptions4 = {
    zoom: 13,
    center: myLatlng4,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
  var map2 = new google.maps.Map(document.getElementById('map_canvas2'), mapOptions2);
  var map3 = new google.maps.Map(document.getElementById('map_canvas3'), mapOptions3);
  var map4 = new google.maps.Map(document.getElementById('map_canvas4'), mapOptions4);
  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map
  });
  var marker2 = new google.maps.Marker({
      position: myLatlng2,
      map: map2
  });
  var marker3 = new google.maps.Marker({
      position: myLatlng3,
      map: map3
  });
  var marker4 = new google.maps.Marker({
      position: myLatlng4,
      map: map4
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

交换 div 脚本

     jQuery(function(){
     jQuery('#showall').click(function(){
           jQuery('.targetDiv').show();
    });
    jQuery('.showSingle').click(function(){
          jQuery('.targetDiv').hide();
          jQuery('#div'+$(this).attr('target')).show();
    });
    });

html

    <div class="left_club" style="float:left; width:200px; margin-right:15px;">
    <h3>Men's Clubs</h3>
    <p><a class="showSingle" target="1" onclick="displayMap()">Royal Legends VBC</a><br>
    <a class="showSingle" target="2" onclick="displayMap2()">Yorktowne VBC</a></p>

    <h3>Women's Clubs</h3>
    <p><a class="showSingle" target="3" onclick="displayMap3()">Lokahi</a><br>
    <a class="showSingle" target="4" onclick="displayMap4()">Yorktowne VBC</a></p>
    </div>

    <div class="targetDiv" id="div1" style=" display:inline;">
    <h2>Royal Legends VBC</h2>
    <p>Contact | <a href="mailto:sample.com">sample</a><br>
Location | Clifton Heights, PA 19018<br>
Phone Number | sample<br>
Website | <a href="http://sample.com/" target="_blank">sample</a>
    <div id="map_canvas"></div>
    </div>

    <div class="targetDiv" id="div2">
    <h2>Yorktowne VBC</h2>
    <p>Contact | <a href="mailto:sample.com">sample</a><br>
Location | Etters PA 17319<br>
Phone Number | sample<br>
Website | <a href="http://www.sample.com/" target="_blank">sample</a>
    <div id="map_canvas2"></div>
    </div>

    <div class="targetDiv" id="div3">
    <h2>Lokahi</h2>
    <p>Contact | <a href="mailto:sample.net">sample</a><br>
Location | West Chester PA 19380<br>
Phone Number | sample<br>
    <div id="map_canvas3"></div>
    </div>

    <div class="targetDiv" id="div4">
    <h2>Yorktowne VBC</h2>
    <p>Contact | <a href="mailto:sample.com">sample</a><br>
Location | Etters PA 17319<br>
Phone Number | sample<br>
Website | <a href="http://www.sample.com/" target="_blank">Yorktowne VBC</a>
    <div id="map_canvas4"></div>
    </div

的CSS

    #map_canvas {margin-top:10px;width: 455px;height: 240px;float:left;border:1px solid #dcdcdc; margin-left:0px; margin-bottom:0px;}
    #map_canvas2 {margin-top:10px;width: 455px;height: 240px;float:left;border:1px solid #dcdcdc; margin-left:0px; margin-bottom:0px;}
    #map_canvas3 {margin-top:10px;width: 455px;height: 240px;float:left;border:1px solid #dcdcdc; margin-left:0px; margin-bottom:0px;}
    #map_canvas4 {margin-top:10px;width: 455px;height: 240px;float:left;border:1px solid #dcdcdc; margin-left:0px; margin-bottom:0px;}
    .showSingle {cursor:pointer;}
    .targetDiv {float:left; width:458px; padding:20px;border:1px solid #dcdcdc; background-color:#f0efee;}

js在第一张地图后隐藏地图

    jQuery(function(){
    $('#div2, #div3, #div4').hide();
    });
4

1 回答 1

1

我知道这个问题非常好，这是我评论中所述的可能解决方案之一，

问题是，当您在具有宽度和高度的元素上启动 google 地图，然后将其设置为 display:none 然后再次显示：block（隐藏/显示）时，它将 fck up 地图。

现在在这个小提琴上，当显示另一张地图或任何地图被隐藏时，容器的宽度和高度不受影响，它们只是水平移动， http://jsfiddle.net/LNYSE/

css，所有地图最初都定位在某个位置，用户看不到。

.targetDiv {position:absolute;top:220px; width:458px;left:-999px; padding:20px;border:1px solid #dcdcdc; background-color:#f0efee;}

html，只有第一张地图是可见的，因为 left:0

<div class="targetDiv activeYo" id="div1" style=" display:inline;left:0;">

这是js，你不需要使用动画功能，你也可以只使用.css('left',0)

jQuery('.showSingle').click(function(){
    jQuery('.activeYo').animate({left:-999}).removeClass('activeYo');
    jQuery('#div'+$(this).attr('target')).animate({left:0}).addClass('activeYo');
});

没有动画http://jsfiddle.net/LNYSE/1/

干杯

于 2013-11-11T21:18:56.903 回答