Google Map API BackBoneJS 无法读取 null 属性“offsetWidth”

我已经通过了尽可能多的 StackOverflow/google 小组来试图弄清楚这个人。

我正在使用 BackboneJS 渲染具有起始位置和结束位置的地图。在新的页面/页面刷新上，我没有收到此错误，并且地图和其他内容工作正常，因为我正在使用 jQuery 的 $(window).load(.....) 函数；但是，当我动态渲染视图时，我收到此错误（我相信），因为 DOM 尚未加载 DIV（因 document.getElementById 失败）。我已经尝试了除 $(window).load() 之外的各种不同方法，但我无法获得适用于这两种用例的任何方法（新页面加载 - BackboneJS 视图加载）。尝试在模板之后立即调用该函数也不起作用。

任何帮助，将不胜感激。

Robert

View:

    App.Views.MapShow = Backbone.View.extend({
      initialize: function() {
        _.bindAll(this, 'render');
        var self = this;
        $(window).load(function() {
          self.renderMap();
        });
      },

      render: function() {
        this.renderTemplate();
      },

      renderTemplate: function() {
        this.$el.html(JST['path/to/show/file']());
      },

      renderMap: function() {
        var from     = this.model.get('location_from');
        var to       = this.model.get('location_to');
        var geocoder = new google.maps.Geocoder();
        var map      = new google.maps.Map(document.getElementById('mapCanvas'), {
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        var directionsService = new google.maps.DirectionsService();
        var directionsDisplay = new google.maps.DirectionsRenderer();

        directionsDisplay.setMap(map);

        var request = {
          origin: from,
          destination: to,
          travelMode: google.maps.DirectionsTravelMode.DRIVING
        };

        directionsService.route(request, function(response, status) {
          if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
          }
        });
      }
    });

HTML:

    <div class="map" id="mapCanvas"></div>

我猜你的问题是#mapCanvas在您尝试访问它之前，它并不在 DOM 中，因此：

document.getElementById('mapCanvas')

会给你一个无用的null。你需要等到#mapCanvas在使用之前已在 DOM 中；你也不能做这样的事情：

map_canvas = this.$el.find('#mapCanvas')[0];

这将为您提供一个有效的 ID，但您会混淆 Google 地图功能，因为它没有大小，因此地图将呈现奇怪的效果。这会让您重新等待 DOM 中的所有内容，然后再绑定 Google 地图内容。

解决这个问题的一种方法是使用setTimeout延迟为零 https://stackoverflow.com/a/9145790/479863:

var _this = this;
setTimeout(function() { _this.renderMap() }, 0);

这看起来有点奇怪，但它确实有效，这个技巧基本上抛弃了你renderMap调用浏览器的工作队列，一旦您将控制权返回给浏览器，它就会开始运行它。

您还可以使用_.defer http://underscorejs.org/#defer:

defer _.defer(function, [*arguments])

推迟调用function直到当前调用堆栈被清除，类似于使用设置超时时间延迟为 0。对于执行昂贵的计算或分块的 HTML 渲染而不阻塞 UI 线程更新很有用。

这可能是一个更好的选择，因为它使您的意图明确。