SmoothStateJS与自定义谷歌地图

Question

我知道这个问题之前曾被问过几次，但仔细查看答案，我仍然无法弄清楚如何解决问题，有人能帮忙吗？

当我刷新页面时，我的地图有效，但当我从任何其他页面导航到地图时，地图不会加载，因为smoothState不会重新加载页面。

我已经让其余的j工作了，除非我刷新页面，否则它只是不会加载的地图。

我已经阅读了关于github的几乎所有帖子以及有关stackoverflow的一些帖子，但我仍然围着圈子而不是反正。

{j}代表update-ca-certificates和谷歌地图

没有灰色空格或彩色框等，控制台也没有错误。

tls_simple

Answer 1

这是因为当加载联系人之外的其他页面时，#gmap_canvas尚不存在。如果你在这一行暂停，你可以看到它：

因此解决方案是仅在此div存在且地图尚未初始化时才启动地图。

$(document).ready(function() {
  var $body = $('body'),
    $main = $('#main'),
    $site = $('html, body'),
    transition = 'fade',
    smoothState,
    // 1. declare this variable to know if the map is initialised
    initialisedMap = false;

  smoothState = $main.smoothState({
    //...
    onReady: {
      duration: 0,
      render: function($container, $newContent) {
        $container.html($newContent);
        $container.removeClass('is-exiting');
        // 2. call init_map() 
        init_map();
      }
    }
  });
});

function initMap() {
  // 3. if the map container is not exist do nothing
  if (!document.querySelector('#gmap_canvas')) {
    return;
  }
  //...
}