Question

我正在尝试创建一个加载小型谷歌地图的页面，它运行正常。现在我想添加一个地图事件点击，显示一个更大的div显示另一个谷歌地图与相同的lng和lat。 div正确显示了谷歌徽标和米色背景颜色，但没有地图，我无法弄清楚问题。我正在使用visual studio 2012，谷歌地图使用javascript显示。

以下是我的代码：

  var latlng;

        function initialize(lng, lat) {

            var myOptions = {
               zoom: 17,
               center: latlng,
               mapTypeId: google.maps.MapTypeId.ROADMAP
            };

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

            var marker = new google.maps.Marker({
               position: latlng,
               map: map,
               icon: "/Images/marker.png",
               title: "This is the place."
            });

            var contentString = 'Hello <strong>World</strong>!';
            var infowindow = new google.maps.InfoWindow({
               content: contentString 
            });

            google.maps.event.addListener(marker, 'click', function () {
               infowindow.open(map, marker);
            });

            document.getElementById("map_canvas").style.visibility = 'visible';

            map.addListener('click', function (e) {

            var myOptions2 = {
               zoom: 17,
               center: latlng,
               mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            var map2 = new google.maps.Map(
              document.getElementById("modal-body"),
              myOptions2);

            var marker2 = new google.maps.Marker({
               position: latlng,
               map: map2,
               icon: "/Images/marker.png",
               title: "This is the place."
            });

            var contentString2 = 'Hello <strong>World</strong>!';
            var infowindow2 = new google.maps.InfoWindow({
               content: contentString2
            });

            google.maps.event.addListener(marker2, 'click', function () {
               infowindow2.open(map2, marker2);
            });

           document.getElementById("myModal").style.display = "block";
               });
       }

这些是我显示地图的div：

 <div id="map_canvas" class="mapDiv" style="visibility:hidden" > </div>
    <div id="myModal" class="modal" style="display: none">
      <div class="modal-content">
        <span onclick="CloseMyDiv();" id="closeSpan" class="close">×</span>
        <br /><br />
        <div id="modal-body"  class="modal-body">
           Hello world !
        </div>
      </div>
    </div>

我再说一遍：当我点击地图画布时（通过添加谷歌徽标和更改背景颜色）模态体改变，但它没有显示地图，我试图在点击事件之前在div中填充地图但仍然有一样的问题。

任何提示？

注意：如果我评论有关map-canvas的所有内容，并且我在onload事件中显示myModal div，则地图显示正确！

Answer 1

1.确保modal-body在CSS中设置了宽度和高度。

2.如果div包含地图，或者它的父级，或者它的父级（任何前任）在某个时刻设置了display:none，那么地图视图没有正确地初始化，你只会看到灰色地图。我注意到只有在初始化地图后才显示模态。因此，要使地图正确显示，请运行此代码

document.getElementById("myModal").style.display = "block";

在map2初始化之前

，或在可见性更改后在地图上触发resize事件，这会重新初始化地图视图：

google.maps.event.trigger(map2,'resize');

可能与您的案例无关，但如果包含“div”维度的地图发生变化，您还需要trigger在地图上调整事件大小。

无法在地图上显示另一个地图单击侦听器事件

1 个答案: