Question

我正在尝试使用js制作标签，以便在网站上获得更多数据。

请查看：http://dev.ateo.dk/officelab-konferencecenter/

顶部的两个标签（＆＃34; Billeder＆＃34;＆＃34; kort＆＃34;）是使用js制作的。

如果我进入名为＆＃34; kort＆＃34;的点击，谷歌地图将无法完全加载 - 但如果我右键单击并选择＆＃34;检查元素（Q）＆＃34;使用firefox，地图突然加载。

此外，地图不居中。在具体位置 - 位置在左上角。

您可能会注意到tab div下面的空白方块。这与js选项卡中使用的代码完全相同。如果我在js选项卡中注释掉，那么空白的方块将完美地工作。因此，似乎js选项卡与js谷歌地图相结合似乎不起作用。可能是这种情况，如果是这样，它是如何修复的？

下面我展示的代码将启动谷歌地图和页面上的点按：

if($('body.single-konferencested').length > 0)
   {
       tabs();
   }

   if($('body.single-konferencested').length > 0)
   {
      $(document).ready(function() {
         function initialize() {
            var myLatlng = new google.maps.LatLng(place_lat,place_lng);
            var mapOptions = {
               zoom: 9,
               center: myLatlng,
               mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            var map = new google.maps.Map(document.getElementById('gmap'), mapOptions);

            var marker = new google.maps.Marker({
               position: myLatlng,
               map: map,
               clickable : true
            });

            var pinIcon = new google.maps.MarkerImage(
               "http://dev.ateo.dk/wp-content/themes/ateo/img/pin_marker.png",
               null, /* size is determined at runtime */
               null, /* origin is 0,0 */
               null, /* anchor is bottom center of the scaled image */
               new google.maps.Size(24, 40)
            ); 
            marker.setIcon(pinIcon);

            var content_string = '<div id="gmap_info">'+
                                    '<div id="siteNotice">'+
                                    '</div>'+
                                    '<h3 id="firstHeading" class="firstHeading">'+place_title+'</h3>'+
                                    '<div id="bodyContent">'+
                                    '<p>'+place_address+'<br />'+place_city_zip+'</div>'+
                                 '</div>';

            var infowindow = new google.maps.InfoWindow({
               content: content_string
            });

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

         google.maps.event.addDomListener(window, 'load', initialize);

      });
   }

以下是显示＆＃34; Kort＆＃34;的DOM的html。标签：

<div class="tabContent" id="kort" style="padding: 5px 10px;">

    <h2>Kort</h2>
    <div id="gmap" style="width: 600px; height: 400px;"></div>
    <h2>test</h2>
  </div>

祝你好运帕特里克

Answer 1

如果在页面加载时看不到地图将要居住的div，则地图将无法正确加载。一旦div进入视野，你应该发射一个调整大小。

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

您应该将其绑定到第一次点击地图标签页。

看起来当前地图已从第二个标签中注释掉。如果您可以取消注释，那么更具体地帮助您会更容易！

编辑：绑定函数一次，试试这个：

var tab = jQuery('ul#tabs li')[1]
jQuery(tab).one('click', function(){
  google.maps.event.trigger(map, 'resize');
});

要使调整大小起作用，您需要从init函数访问map变量。如果你在它上面放一个类，那么选择正确的选项卡也会更容易。这比在选项卡ul中获得第二个li更可靠。

编辑2：尝试在初始化代码中添加click功能。类似于以下内容

var mapOptions = {
   zoom: 9,
   center: myLatlng,
   mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('gmap'), mapOptions);

//add the code here, after the map variable has been instantiated
var tab = jQuery('ul#tabs li')[1]
jQuery(tab).one('click', function(){
  google.maps.event.trigger(map, 'resize');
  //fire a center event after the resize, this is also useful
  // if bound to a window resize
  map.setCenter(myLatlng)
});
//end of new code

var marker = new google.maps.Marker({
   position: myLatlng,
   map: map,
   clickable : true
});

Answer 2

通过在标签点击上重新初始化Google地图，可以轻松解决这个问题。

$('#kort').click(function(e) {
    initialize();
    resetMap(map);
});

这个简单的解决方案从这里找到 - How to Display Google Map Inside of a Hidden Div

Google地图未在js标签内加载

2 个答案: