带有自定义 Google 地图的 SmoothStateJS

Question

我知道这个问题已经被问过几次了，但是看了很多答案我还是不知道如何解决这个问题，有人能帮忙吗？

当我刷新页面时，我的地图可以工作，但是当我从任何其他页面导航到它时，地图不会加载，因为 smoothState 不会重新加载页面。

我的 js 的其余部分都在工作，只是地图不会加载，除非我刷新页面。

我已经阅读了 github 上关于此的几乎所有帖子以及一些关于 Whosebug 的帖子，但我一直在兜圈子，但无论如何都没有。

我的 smoothState 和 google 地图的 js

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

$(document).ready(function() {

  var $body = $('body'),
    $main = $('#main'),
    $site = $('html, body'),
    transition = 'fade',
    smoothState;

  smoothState = $main.smoothState({
    onBefore: function($anchor, $container) {
      var current = $('[data-viewport]').first().data('viewport'),
        target = $anchor.data('target');
      current = current ? current : 0;
      target = target ? target : 0;
      if (current === target) {
        transition = 'fade';
      } else if (current < target) {
        transition = 'moveright';
      } else {
        transition = 'moveleft';
      }
    },
    onStart: {
      duration: 400,
      render: function(url, $container) {
        $main.attr('data-transition', transition);
        $main.addClass('is-exiting');
        $site.animate({
          scrollTop: 0
        });
      }
    },
    onReady: {
      duration: 0,
      render: function($container, $newContent) {
        $container.html($newContent);
        $container.removeClass('is-exiting');
      }
    },
    onAfter: function($container) {
      $container.onPageLoad();
    },
  }).data('smoothState');
});

function init_map() {
  var myOptions = {
    zoom: 18,
    backgroundColor: "#212121",

    center: new google.maps.LatLng(53.4864171, -2.2338110000000597),
    mapTypeId: google.maps.MapTypeId.ROADMAP,

    styles: [{
        elementType: 'geometry',
        stylers: [{
          color: '#242f3e'
        }]
      },
      {
        elementType: 'labels.text.stroke',
        stylers: [{
          color: '#242f3e'
        }]
      },
      {
        elementType: 'labels.text.fill',
        stylers: [{
          color: '#ccc'
        }]
      },
      {
        featureType: 'administrative.locality',
        elementType: 'labels.text.fill',
        stylers: [{
          visibility: 'none'
        }]
      },
      {
        featureType: 'poi',
        elementType: 'labels.text.fill',
        stylers: [{
          visibility: 'none'
        }]
      },
      {
        featureType: 'poi.park',
        elementType: 'geometry',
        stylers: [{
          color: '#263c3f'
        }]
      },
      {
        featureType: 'poi.park',
        elementType: 'labels.text.fill',
        stylers: [{
          visibility: 'none'
        }]
      },
      {
        featureType: 'road',
        elementType: 'geometry',
        stylers: [{
          color: '#38414e'
        }]
      },
      {
        featureType: 'road',
        elementType: 'geometry.stroke',
        stylers: [{
          color: '#212a37'
        }]
      },
      {
        featureType: 'road',
        elementType: 'labels.text.fill',
        stylers: [{
          color: '#9ca5b3'
        }]
      },
      {
        featureType: 'road.highway',
        elementType: 'geometry',
        stylers: [{
          color: '#ccc'
        }]
      },
      {
        featureType: 'road.highway',
        elementType: 'geometry.stroke',
        stylers: [{
          color: '#1f2835'
        }]
      },
      {
        featureType: 'road.highway',
        elementType: 'labels.text.fill',
        stylers: [{
          color: '#ccc'
        }]
      },
      {
        featureType: 'transit',
        elementType: 'geometry',
        stylers: [{
          color: '#2f3948'
        }]
      },
      {
        featureType: 'transit.station',
        elementType: 'labels.text.fill',
        stylers: [{
          color: '#ccc'
        }]
      },
      {
        featureType: 'water',
        elementType: 'geometry',
        stylers: [{
          color: '#17263c'
        }]
      },
      {
        featureType: 'water',
        elementType: 'labels.text.fill',
        stylers: [{
          color: '#515c6d'
        }]
      },
      {
        featureType: 'water',
        elementType: 'labels.text.stroke',
        stylers: [{
          color: '#17263c'
        }]
      }
    ]
  };

  map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);
  marker = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng()
  });
  infowindow = new google.maps.InfoWindow({
    content: ''
  });
  google.maps.event.addListener(
    marker, 'click',
    function() {
      infowindow.open(map, marker);
    }
  );
  infowindow.open(map, marker);
}

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

Answer 1

这是因为当 contact 之外的其他页面被加载时 #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;
  }
  //...
}

带有自定义 Google 地图的 SmoothStateJS

SmoothStateJS with Custom Google Map

javascript

ajax

jquery

google-maps

smoothstate.js