谷歌地圖在我的灰燼成分

我想包括我燼應用一個谷歌地圖灰色框，我創建了它的組件：谷歌地圖在我的灰燼成分

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>

來源

2016-03-19 don giulio

我意識到，我是路過的座標到組件的方式是錯誤的，所以地圖沒有渲染，因爲id不知道在哪裏渲染。

這是爲了在餘燼2.4.2數據傳遞到一個組件的正確方法：

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

來源

2016-03-19 13:49:34

谷歌地圖在我的灰燼成分

回答

相關問題