Question

我正在使用谷歌地图的JavaScript API。这很简单，我只有：

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
          function initialize() {
            var myLatlng = new google.maps.LatLng(<?php echo $get_music_spot['music_spot_lat'].', '.$get_music_spot['music_spot_lng']; ?>);
            var myOptions = {
              zoom: 14,
              center: myLatlng,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            var marker = new google.maps.Marker({
                position: myLatlng, 
                map: map,
                title:"<?php echo $get_music_spot['music_spot_title']; ?>"
            });   
          }
</script>

在标题中

，我有<div style="width:600px; height:500px; float:left;" id="map_canvas"></div> 在身体里实际调用地图。那当然我有<body onLoad="initialize()"> 这基本上是基本地图所需要的。但是，因为它在jQuery中，例如它会变得乱七八糟的jQuery UI标签。这是一个截图：

enter image description here

您可以看到左上角只显示地图的一个片段。为什么会发生这种情况，我该如何解决这个问题？我将iFrame实现为基本嵌入，但这在IE中不起作用。

Answer 1

至于为什么它不起作用，我不能告诉你为什么。但是尝试使用jQuery Tabs小部件上的一个事件来初始化地图，例如show或select事件。

$('#myTabs').tabs({
    show: function(event, ui){

        // check if is "mappanel" and "map" is empty
        if (ui.panel.id == 'mappanel' && $('#map').is(':empty'))
        {
            // load map
            var myOptions = {
                center: new google.maps.LatLng(-34.397, 150.644),
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map"), myOptions);      
        }
    }                    
});

在那里包含一个检查非常重要，这样每次选择地图标签（或任何其他标签）时都不会重新加载地图。

请参阅此jsFiddle。

谷歌地图将无法在jQuery UI标签内部工作

1 个答案: