如何在隐藏元素中启动 Gmaps

Question

我有一个默认隐藏的元素 (#hidden-element)。当我点击按钮 (#btn-toggle) 时，我想让这个元素可见。目前，一切都很好。该元素确实出现了，但如果我第一次单击该按钮，地图将不会出现。然后我点击隐藏元素，然后第二次显示隐藏元素，现在地图就在这里。

所以，我的问题是，我如何确定地图会第一次出现（我想我必须初始化地图或类似的东西）并且我能以某种方式销毁地图对象吗？甚至有必要销毁地图对象吗？

$(document).ready(function(){

  // function for showing the map with markers - gmaps4rails gem
  function showMap(){
    var handler = Gmaps.build('Google');
      handler.buildMap({ internal: {id: 'multi_markers'}}, function(){
        var markers = handler.addMarkers([
          { lat: 43, lng: 3.5},
          { lat: 45, lng: 4},
          { lat: 47, lng: 3.5},
          { lat: 49, lng: 4},
          { lat: 51, lng: 3.5}
        ]);
        handler.bounds.extendWith(markers);
        handler.fitMapToBounds();
      });
  }

  // this will hide the element when document is ready
  $("#hidden-element").hide();
  // if I click on button with ID btn-toggle, element will shows up or hide
  $("#btn-toggle").click(function(){
    if ($('#hidden-element').is(':hidden')){
      // is necesarry to have condition and check if element is hidden or visible?
    } else if ($('#hidden-element').is(':visible')){
      // element is hidden? Show it!
      showMap();
    }


    $("#hidden-element").toggle(1000);

  });
});

Answer 1

所以不是库的错误。我认为 Gmaps4Rails 在元素出现时不知道元素的精确位置。所以你必须确保元素完全可见，然后显示地图：

$("#hidden-element").toggle(1000).promise().done(function(){
      if ($('#hidden-element').is(':visible')){
        showMap();
      }
});

这基本上意味着地图将在元素完全可见并在屏幕上占据一席之地后加载。

如何在隐藏元素中启动 Gmaps

How to initiate Gmaps in hidden element

javascript

google-maps

ruby-on-rails

gmaps4rails