1

我已经查看了数十个与此相关的不同主题，但在我的一生中无法让其中任何一个发挥作用。我目前有一个单页网站，其中包含 1 个谷歌地图和 4 个标记。在地图下方，这些标记中的每一个都有一个小的 html 部分，其中包含有关联系人/地址等信息以及一个链接。此链接会打开一个模式窗口（基础 3），其中包含放大的谷歌地图，上面只有一个位置。

在这些模式窗口上显示的地图仅将地图的 3/4 显示为灰色块。

HTML：

<a href="#map1" id="modal1-button" data-reveal-id="myModal1" title="location details" class="red-arrow">visit location</a>

    <div id="myModal1" class="reveal-modal large">
      <div id="map-modal1" style="width:100%;height:500px;"></div>
    </div>

Javascript：

<script type="text/javascript">

var markers = [
     ['Location1', 53.479468, -2.246873, 1],
     ['Location2', 53.483558, -2.239243, 4],
     ['Location3', 53.482900, -2.243132, 5],
     ['Location4', 53.481489, -2.244967, 3];

var map2;

function initializeMaps() {
    var myOptions = {
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false
    };

    var optionsMap1 = {
        zoom: 14,
        center: new google.maps.LatLng(53.480487, -2.241776),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false
    };

    var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
    map2 = new google.maps.Map(document.getElementById("map-modal1"),optionsMap1);

    var image = 'img/wings_icon.png';
    var image2 = 'img/wings_icon_main.png';

    var infowindow = new google.maps.InfoWindow(); 
    var marker, i;
    var bounds = new google.maps.LatLngBounds();

    var map2LatLng = new google.maps.LatLng(53.483558, -2.239243);
    var map2Marker = new google.maps.Marker({
          position: map2LatLng,
          map: map2,
          icon: image,
          title: 'Wings Manchester Arndale'
    });

    //Main Map Markers Loop
    for (i = 0; i < markers.length; i++) { 
        var pos = new google.maps.LatLng(markers[i][1], markers[i][2]);
        bounds.extend(pos);
        if (i === 0){
            marker = new google.maps.Marker({
                position: pos,
                icon: image2,
                map: map
            }); 
        } else {
            marker = new google.maps.Marker({
                position: pos,
                icon: image,
                map: map
            });
        }
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infowindow.setContent(markers[i][0]);
                infowindow.open(map, marker);
            }
        })(marker, i));
    }
    map.fitBounds(bounds);

}


/*  
jQuery('#myModal1').bind('', function() {
  google.maps.event.trigger(map2, 'resize');
  map2.setCenter(new google.maps.LatLng(53.483558, -2.239243));
});
*/

jQuery(document).ready(function(){
  jQuery("a#more").click(function(){
    jQuery("#show-para").toggle();
  });
  jQuery( "#modal1-button" ).click(function() {
      alert( "Handler for .click() called." );
       google.maps.event.trigger(map2, 'resize');
    });
});

</script>

根据研究，问题在于在模态窗口中将 div 及其内部的所有内容（地图）设置为不显示，然后当它再次显示在 v3 google maps api 中时，它需要 .resize() 'd。当“google.maps.event.trigger(map2, 'resize');” 输入到控制台它可以工作，但为了我的爱，我无法点击按钮来触发它。

4

0 回答 0