Question

我已经经历了尽可能多的StackOverflow / google小组，因为我可以想象试图找出这个人。

我正在使用BackboneJS渲染具有起始位置和结束位置的地图。在新的页面/页面刷新，我没有得到这个错误，并且地图和东西工作正常，因为我使用jQuery的$（窗口）.load（.....）函数;但是，当我动态渲染我的View时，我得到了这个错误 - 我相信 - 因为DOM还没有加载DIV（使用document.getElementById失败）。我已经尝试了除$（window）.load（）以外的各种方法，但我无法得到任何适用于这两种用例的东西（新页面加载 - BackboneJS视图加载）。尝试在模板不起作用后立即调用该函数。

任何帮助都将不胜感激。

罗伯特

查看：

    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>

Answer 1

我猜你的问题是#mapCanvas在你尝试访问它之前不在DOM中，所以：

document.getElementById('mapCanvas')

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

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

这会为您提供有效的ID，但是您会混淆Google地图功能，因为它没有大小，因此地图会呈现奇怪的效果。这会让您在绑定Google地图之前等待DOM中的所有内容。

解决此问题的一种方法是使用setTimeout with a delay of zero：

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

这看起来很奇怪它确实有效，这个技巧基本上将你的renderMap调用转储到浏览器的工作队列中，一旦你将控制权返回给浏览器，它就会运行它。

您还可以使用_.defer：

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

延迟调用函数，直到当前调用堆栈已清除，类似于使用 setTimeout ，延迟为0.用于执行昂贵的计算或HTML渲染而不用阻止UI线程更新。

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

Google Map API BackBoneJS无法读取null的属性'offsetWidth'

1 个答案: