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

Google Map API BackBoneJS Cannot read property 'offsetWidth' of null

本文关键字：属性 offsetWidth null 读取 API Map BackBoneJS Google      更新时间：2023-09-26

我已经经历了尽可能多的StackOverflow/google群组，我能想象到试图弄清楚这个家伙。

我正在使用 BackboneJS 渲染具有开始位置和结束位置的地图。在新的页面/页面刷新中，我没有收到此错误，并且地图和东西工作正常，因为我正在使用jQuery的$（window）.load（.....）函数;但是，当我动态渲染我的视图时，我收到此错误 - 我相信 - 因为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>

我猜你的问题是#mapCanvas直到你尝试访问它之后才在 DOM 中，这样：

document.getElementById('mapCanvas')

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

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

这将为您提供一个有效的ID，但您会混淆Google地图功能，因为它没有大小，因此地图会奇怪地呈现。这让你回到等待所有内容都在 DOM 中，然后再绑定你的谷歌地图的东西。

解决此问题的一种方法是使用延迟为零的setTimeout：

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

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

您还可以使用_.defer：

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

延迟调用函数，

直到当前调用堆栈清除，类似于使用 setTimeout，延迟为 0。可用于在不阻止 UI 线程更新的情况下执行昂贵的计算或块中的 HTML 呈现。

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

相关文章：