1

嘿，我正在研究 google MAP ..我已经使用 Google Maps ices 实现了 google map，但是当页面刷新地图仅显示在 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);
            }


    }
4

1 回答 1

1

扩展 Beetroot 在他的评论中所说的内容，您可以使用以下方法解决该问题：

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

如果地图确实位于隐藏元素中，例如模式窗口，则将此调用放在单独的 JS 文件中，即您的主站点 JS 文件中。

于 2013-04-29T12:33:01.827 回答