谷歌聚合物：谷歌地圖搜索不起作用

Question

  <paper-dialog id="post" entry-animation="scale-up-animation" exit-animation="fade-out-animation"> 
       <div class="find-area"> 
        <paper-textarea on-input="find" id="find_textarea" class="find-place-text" label="Find your place" maxlength="250"></paper-textarea> 
       </div> 
       <div class="map-area"> 
        <google-map id="[[map]]" 
           api-key="000000000myapi000000" 
          latitude="[[lat]]" 
          longitude="[[lon]]" 
          fit-to-markers> 
        </google-map> 
        <google-map-search id="google_search" 
             globalSearch="true" 
             map="[[map]]" 
             results="[[results]]"> 
        </google-map-search> 
       </div> 
       <paper-button on-tap="[[upload]]">Accept</paper-button> 
       <label>coords:[[ results::lat ]], [[ results::lon ]]</label> 
       <label>query:[[ query ]]</label> 
       <label>map:[[ map ]]</label> 
       <label>results:[[results]]</label> 
      </paper-dialog> 
<script> 
      function _showPosition(position) { 
      try { 
       x.latitude = position.coords.latitude; 
       x.longitude = position.coords.longitude; 
      }catch (err){ 
       alert(err+'; position:'+position) 
      } 

     } 
     function showError(error) { 
      alert('error:'+ error) 
     }*/ 
     function _submit(event) { 
      Polymer.dom(event).localTarget.parentElement.submit(); 
     } 
     Polymer({ 
       is: 'profile-new-post', 
       properties: { 
        enable : { 
         type: Boolean, 
         value: true 
        }, 
        lat : { 
         value : 37.77493 
        }, 
        lon : { 
         value : -122.41942 
        }, 
        query : { 
         type : String, 
         value : "" 
        }, 
        results : { 
         type : Array 
        }, 
        map : { 
         type : Object 
        } 
       }, 
       func : function (e) { 
        this.map = this.$.map; 
        post.open(); 
       }, 
       find : function (e) { 
        this.$.google_search.query = this.$.find_textarea.value; 
        this.query = this.$.google_search.query; 
        this.$.google_search.search(); 
        this.lat = this.$.google_search.results.latitude; 
        this.lon = this.$.google_search.results.longitude; 
        //alert(this.$.google_search.results.latitude + '; ' + this.$.google_search.results.longitude) 
       }, 

我試圖使用[[]]括號，因爲django使用{{}}。輸出標籤中的地圖，結果和座標是空的。它顯示與舊金山的地圖，但是當我嘗試在輸入中打印文本時，它不想搜索。控制檯中沒有任何錯誤。我已經看到了谷歌關於這個的視頻教程視頻，但是有一個老版本的聚合物，很多東西像{{$ .element.atribute}}在元素頭裏面不起作用（它不知道'$'是什麼） 。也許有人可以爲我解釋[[]]和{{}}之間最大的區別是什麼，因爲我無法從官方教程中理解它？

解決：解決它，我必須把源來自內部對話框，新模板與屬性=「DOM綁定

 <p><paper-button raisedButton on-tap="upload">Upload</paper-button></p> 
     <paper-button id="dialogbutton" on-tap="func">Post</paper-button> 
     <paper-dialog id="post" entry-animation="scale-up-animation" exit-animation="fade-out-animation"> 
      <template is="dom-bind"> 
       <div class="find-area"> 
        <paper-input value="{{ input_query }}" on-input="find" id="find_textarea" class="find-place-text" label="Find your place" maxlength="250"></paper-input> 
       </div> 
       <div class="map-area"> 
        <google-map-search 
          id="google_search" 
          map="{{ map }}" 
          query="{{ input_query }}" 
          results="{{results}}" 
          on-google-map-search-results="searchingComplite"> 
         </google-map-search> 
         <google-map 
           map="{{map}}" 
           latitude="{{results[0}.latitude}}" 
           longitude="{{results[0}.longitude}}"> 
         </google-map> 
       </div> 
       <paper-button on-tap="upload">Accept</paper-button> 
       <label>coords:{{ lat }}, {{ lon }}</label> 
       <label>query:{{ query }}</label> 
       <label>map:{{ map }}</label> 
       <label>results:{{ results }}</label> 
      </template> 

Answer 1

有幾個問題在這裏：

1. 是的，[[]]括號是這裏的問題，因爲它們強制執行單向綁定，這意味着google-map-search的results不能向上傳播，而標籤是空的，您需要更改結果s = [[results]]至results={{results}}啓用雙向綁定
2. 對於declerative事件處理程序，您不需要任何括號。那麼這條線<paper-button on-tap="[[upload]]">Accept</paper-button>應該是？ <paper-button on-tap="upload">Accept</paper-button>
3. 要訪問數據綁定對象的子屬性，您需要使用點符號（.）。此行<label>coords:[[ results::lat ]], [[ results::lon ]]</label>應改爲<label>coords:[[ results.lat ]], [[ results.lon ]]</label>
4. 我也會改變lat和lon來計算的特性，這要麼返回默認值（或者只是使用你的google-map元素的屬性）或值從您的搜索結果。