如何將谷歌地圖在聚合物＃^ 2.0，因爲它是在聚合物1.7

Question

我已經包含API的使用，之前的一切是在聚合物1.7工作完善，升級到聚合物^ 2.0谷歌地圖後，不渲染。 這裏是我主要的應用程序頁的書面聚合物類的基本代碼：

<iron-pages role="main" selected="[[page]]" attr-for-selected="name" selected-attribute="visible" fallback-selection="404"> 
    <jj-maps name="maps" user="{{user}}" sprof="{{sprof}}"></jj-maps> 
    <jj-list name="list" > Jobs </jj-list> 
    <jj-infos name="infos"> infos  </jj-infos> 
    <jj-contacts name="contacts" > Contacts </jj-contacts> 
    <jj-messages name="messages"> Messages </jj-messages> 
    <jj-404 name="404" > 404   </jj-404> 
</iron-pages> 

在JJ-maps.html代碼示例是：在模板標籤

<link rel="import" href="../bower_components/polymer/polymer.html"> 
<link rel="import" href="../bower_components/google-map/google-map.html"> 
<link rel="import" href="../bower_components/google-map/google-map-marker.html"> 

樣式代碼：

<dom-module id="jj-maps"> 
    <template> 
    <style include="iron-flex iron-flex-alignment"> 
     :host { 
     ..... 
     google-map, #mapResults { 
      margin-top: 10px; 
      position: relative; 
      height: 100vh; 
      width: 100vh%; 
      z-index: 1; 
     } 

....

 <div id="mapResults"> 
     <google-map 
        id="map" 
        map="{{map}}" 
        latitude="[[latitude]]" 
        longitude="[[longitude]]" 
        zoom="10" 
        api-key="[[myApiKey]]" 
        on-google-map-ready= '_mapLoaded' 
        additional-map-options='{"gestureHandling" : "greedy"}' 
        > 
       <google-map-marker map="{{map}}" slot="marker" latitude="{{latitude}}" longitude="{{longitude}}" 
         title="You are here !" icon="./src/image/gpslocc.png" draggable="true"> 
       </google-map-marker> 
       <template is="dom-repeat" items="{{sprof}}" as="item"> 
         <google-map-marker map="[[map]]" slot="marker" latitude="[[item.myLat]]" longitude="[[item.myLng]]" animation="DROP" click-events title="{{item.prof}}" icon="{{calculateIconType(item.isFree)}}" on-google-map-marker-click='showUserDetail' userid="[[item.uid]]" isFree="{{item.isFree}}" > 
         </google-map-marker> 

       </template> 
       <paper-fab icon="maps:my-location" on-tap="updateCurrentPosition"></paper-fab> 
       </google-map> 
     </div> 

    </template> 

這個代碼在以前的聚合物完美。當我鮑爾另一點安裝依賴關係bower install --save GoogleWebComponents/google-map

亭子問我有兩個爲：

- Unable to find a suitable version for polymer, please choose one by typing one of the numbers below: 
I chose : 7) polymer#^2.0.0 which resolved to 2.0.1 and is required by myApp 
    - Unable to find a suitable version for webcomponentsjs, please choose one by typing one of the numbers below: 
I chose : 2) webcomponentsjs#^1.0.0 which resolved to 1.0.1 and is required by myApp 

對不起事先我已經寫了詳細的規範。同時，我已經嘗試了許多選擇，但能不能夠使地圖在我的JJ-的地圖元素（類基本模板，連我都試過傳統模板（如相同聚合物1.7版本）

這裏是控制檯的警告：

dom-module.html:24 dom-module google-map has style outside template 
dom-module google-map-marker has style outside template 

地圖沒有繪製...

那麼，該如何解決？先謝謝了。（以前的版本聚合物。在jobijoy.com

Answer 1

工作我有完全相同的問題。試過添加時隙=「標記」到谷歌地圖標記爲有人建議Polymer 2.0 issue in github但不適合我。它看起來像谷歌地圖組件的大小由0設置爲0，因此不會顯示在所有。由於Google組件未更新爲與Polymer 2.0兼容。我已經手動更新了bower_component文件夾下的本地google-map.html和google-map-marker.html文件，並將樣式標籤移至模板標籤中。警告消失，現在地圖顯示。我想我們必須等待谷歌組件更新的東西才能正常工作。我希望這有幫助。