javascript - polymer 1.0/leaflet 0.7.3 中的 Element.clientWidth/.clientHeight

Question

Leaflet 通常需要一个具有定义高度的 ... 作为其在普通 DOM 中的容器。我想在自定义元素中复制它。

问题是:如何让自定义元素的第一个子内容元素具有由 Leaflet 使用的 Element.clientHeight、Element.clientWidth 报告的定义的高度和宽度？

我正在尝试使用 Polymer 1.0 + leaflet 0.7.3 构建自定义元素。我意识到传单对 DOM 的使用可能会成为一个需要管理的问题，但是我在设置传单容器以便首先创建有效的 map 时遇到问题。我认为这是因为 leaflet 使用 Element.clientHeight/.clientWidth 来生成它请求图 block 的范围。

我在这里设置了一个plunker:http://plnkr.co/edit/uELMbapeApmp8MBfomfr?p=info 。

  console.log(this.localName + '#' + this.id + ' was attached');
  console.log("getComputedStyle("+this.localName+").height/width: " + window.getComputedStyle(this).height+"/"+ window.getComputedStyle(this).width);
  console.log(this.localName + "this.clientHeight/Width: "+this.clientHeight+ "/"+this.clientWidth);
  this.map = L.map(this.$.map, {
    center: new L.LatLng(this.getAttribute('lat'), this.getAttribute('lon')),
    zoom: this.getAttribute('zoom')
  });
  console.log("map center: "+this.map.getCenter());
  var west = this.map.getBounds().getWest(),
      south = this.map.getBounds().getSouth(),
      east = this.map.getBounds().getEast(),
      north = this.map.getBounds().getNorth();

  if (west === east || south === north) {
    console.log('ERROR: BAD EXTENT');
  }

如果您显示控制台，它应该记录首次设置 map 时计算的范围。奇怪的是，如果我在本地运行它，并在 my-map.html 附加回调的第一行(上面的第一个 console.log)上放置一个断点，并逐步执行它，则范围的计算方式会有所不同(正确) 。如果没有断点，则计算范围的高度为 0，并记录错误。

我已经尝试过:

<template><div id="map"></div></template> <template><div id="map"><content></content></div></template>

当然，模板中根本没有任何内容。

Answer 1

问题是附加的回调在样式等完全传输到元素之前执行。这是通过使用 async(function, [wait]) 库方法解决的。