Question

我试图在我的ember应用中包含一个谷歌地图，我为它创建了一个组件：

import Ember from 'ember';

export default Ember.Component.extend({
  didRender: function () {
    var container = this.$('.map-canvas')[0];
    try {
      var options = {
        center: new window.google.maps.LatLng(
          this.get('latitude'),
          this.get('longitude')
        ),
        zoom: 15
      };
      var map = new window.google.maps.Map(container, options);
      google.maps.event.trigger(map, 'resize');
    }catch (exception){
      console.log("Unable to initialise map " + exception)
    }
  }
});

和相应的模板：

<div class="map-canvas" style="width:500px;height:500px;"></div>

结果是，在我的页面中，我只看到一个灰色的框500x500像素，当我将鼠标悬停并在其中单击时，我在检查员网络流量中看到googleapis，数据来回传递，这告诉我地图是实际上工作正常，只是出于某种原因，它没有显示出来。

另外，如果我检查div的内容，我可以看到正在填充的数据：

 <div class="map-canvas" style="width: 500px; height: 500px; position: relative; overflow: hidden; transform: translateZ(0px); background-color: rgb(229, 227, 223);">
<div class="gm-style" style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;">
  <div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0; cursor: url(&quot;https://maps.gstatic.com/mapfiles/openhand_8_8.cur&quot;) 8 8, default;">
    <div style="position: absolute; left: 0px; top: 0px; z-index: 1; width: 100%; transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, 1, 0, 0);">
      <div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 100; width: 100%;">
        <div style="position: absolute; left: 0px; top: 0px; z-index: 0;">
          <div aria-hidden="true" style="position: absolute; left: 0px; top: 0px; z-index: 1; visibility: inherit;"></div>
        </div>
      </div>

      <div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 101; width: 100%;"></div>

      <div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 102; width: 100%;"></div>

      <div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 103; width: 100%;"></div>

      <div style="position: absolute; z-index: 0; transform: translateZ(0px);">
        <div style="overflow: hidden;"></div>
      </div>

      <div style="position: absolute; left: 0px; top: 0px; z-index: 0;">
        <div aria-hidden="true" style="position: absolute; left: 0px; top: 0px; z-index: 1; visibility: inherit;"></div>
      </div>
    </div>

    <div style="position: absolute; left: 0px; top: 0px; z-index: 2; width: 100%; height: 100%;"></div>

    <div style="position: absolute; left: 0px; top: 0px; z-index: 3; width: 100%; height: 100%;"></div>

    <div style="position: absolute; left: 0px; top: 0px; z-index: 4; width: 100%; transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, 1, 0, 0);">
      <div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 104; width: 100%;"></div>

      <div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 105; width: 100%;"></div>

      <div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 106; width: 100%;"></div>

      <div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 107; width: 100%;"></div>
    </div>
  </div>
</div>

Answer 1

我意识到我是以错误的方式将坐标传递给组件，因此地图没有渲染，因为id不知道在哪里渲染。

这是将数据传递给ember 2.4.2中的组件的正确方法：

 {{ google-map latitude=model.coordinatesLat longitude=model.coordinatesLon }}

谷歌地图是我的余烬组件中的灰色框

1 个答案: