Question

我认为在使用gmaps api时偶然发现了这个奇怪的问题。我随机得到的问题是“无法读取属性＆＃39; offsetWidth＆＃39;当绘制地图时为null。

在main.html

<div class="container-fluid">
   {{> mapPlaceHolders}}
   <div class="row">
      {{> dispMap}}
  </div>
</div>

<template name="mapPlaceHolders">
{{#if currentUser}}
    <div class = "row">
        <div class="google-map-canvas col-xs-9" id="map-canvas"></div>
        <div class="col-xs-3" id="directions-panel"></div>
    </div>
    <div id="outputDiv"></div>
{{/if}}
</template>



Template.dispMap.rendered = function(){
   gmap.initialize();
}

我的理解是，首先mapPlaceHolders会在初始化gmap之前将我的div map-canvas添加到窗口中。但随机我看到错误

     Exception from Tracker afterFlush function: Cannot read property 'offsetWidth' of null
TypeError: Cannot read property 'offsetWidth' of null
    at aj (https://maps.gstatic.com/cat_js/maps-api-v3/api/js/19/1/%7Bmain,geometry,places%7D.js:40:1854)
    at new Jj (https://maps.gstatic.com/cat_js/maps-api-v3/api/js/19/1/%7Bmain,geometry,places%7D.js:46:992)
    at Object.gmap.initialize (http://localhost:3000/client/helpers/gmap_helpers.js?05a616018d24094e049effd64aa94b374364fbe2:118:14)
    at Template.dispMap.rendered (http://localhost:3000/client/helpers/gmap_helpers.js?05a616018d24094e049effd64aa94b374364fbe2:251:8)
    at null.<anonymous> (http://localhost:3000/packages/blaze.js?77c0809654ee3a10dcd5a4f961fb1437e7957d33:2970:21)
    at http://localhost:3000/packages/blaze.js?77c0809654ee3a10dcd5a4f961fb1437e7957d33:1720:14
    at Object.Blaze._withCurrentView (http://localhost:3000/packages/blaze.js?77c0809654ee3a10dcd5a4f961fb1437e7957d33:2029:12)
    at http://localhost:3000/packages/blaze.js?77c0809654ee3a10dcd5a4f961fb1437e7957d33:1719:15
    at Tracker.flush (http://localhost:3000/packages/tracker.js?192a05cc46b867dadbe8bf90dd961f6f8fd1574f:438:11)

Answer 1

我找到了一种解决方法来硬编码等待时间，直到创建了map-canvas元素，而且似乎没有别的办法

Template.dispMap.rendered = function(){
function drawCanvas(){
            if($('#map-canvas').length){
                console.info("map-canvas added to the dom");
                $('#map-canvas').ready(gmap.initialize());
            }else
            {
                console.info("wait for map-canvas to be ready");
                setTimeout(drawCanvas, 500);
            }
        }
        drawCanvas();
}

Answer 2

使用googlemaps-mateor包，然后从页眉或页脚中删除google地图脚本行。它对我有用。

异步渲染的流星模板 - 无法读取null的属性'offsetWidth'

2 个答案: