Question

嘿我正在研究谷歌地图..我已经使用谷歌地图冰实现了谷歌地图，但当页面刷新地图只显示在div容器的左上角时，即只显示div容器的第四部分，而另一部分是空白的。但是当我按F12检查代码（Firebug）时，它将完全显示。我无法理解发生了什么......

  <div id="dvMap" >
      </div> 
 <script type="text/javascript" src="http://maps.googleapis.com/maps/api /js?sensor=false">

 </script>
<script type="text/javascript">
var map;  
var markers = [
       <asp:Repeater ID="rptMarkers" runat="server" >
       <ItemTemplate>
                {
                       // "title":  '<%#Regex.Replace(Eval("HotelNamelabel").ToString(),"/\\W\\d\\S\\[\\w'-]/",string.Empty) %>',
                        "lat": '<%# Eval("Latitude") %>',
                        "lng": '<%# Eval("Longitude") %>',
                       // "description": '<%#Regex.Replace(String.Format("{0} , {1} , {2}",Eval("HotelNamelabel"),Eval("HotelLocation"),Eval("HotelCity")),"/\\W\\d\\S\\[\\w'-]/",string.Empty) %>'

                    }

        </ItemTemplate>
        <SeparatorTemplate>
            ,
            </SeparatorTemplate>
            </asp:Repeater>
    ];


    window.onload = function () {
       var mapOptions = {
                center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var infoWindow = new google.maps.InfoWindow();
            var map = new google.maps.Map(document.getElementById("dvMap"),  mapOptions);
            google.maps.event.addDomListener(map, 'resize', function(){
                alert('div resize');
                google.maps.event.trigger(map,'resize');
            });

          for (i = 0; i < markers.length; i++) {
                var data = markers[i]
                var myLatlng = new google.maps.LatLng(data.lat, data.lng);
                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title: data.title
                });
                (function (marker, data) {
                    google.maps.event.addListener(marker, "click", function (e) {
                        infoWindow.setContent(data.description);
                        infoWindow.open(map, marker);
                    });
                })(marker, data);
            }


    }

Answer 1

扩展Beetroot在评论中所说的内容，您可以使用以下内容克服该问题：

$(function () {
    $('#yourMapContainer').on('shown', function () {
        google.maps.event.trigger(map, "resize");
    });
});

如果地图确实在隐藏元素（如模态窗口）中，请将此调用放在单独的JS文件中，即主站点JS文件中。

谷歌地图只显示左边的四个部分

1 个答案: