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}}等许多东西都不起作用（它不知道什么＆＃39; $＆＃39;是。也许有人可以向我解释[[]]和{{}}之间最大的区别是什么，因为我无法从官方教程中理解它？

解决：要解决它，我必须将来自对话框的源码放到新模板中，属性为=＆＃34; dom-bind。

        <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

这里有几个问题：

是的，[[]]括号是这里的问题，因为它们强制执行单向绑定。这意味着results中的google-map-search无法向上传播且标签为空。您需要将结果= [[results]]更改为results={{results}}以启用双向绑定
对于角色事件处理程序，您不需要任何括号。那么这一行<paper-button on-tap="[[upload]]">Accept</paper-button>应该是？<paper-button on-tap="upload">Accept</paper-button>
要访问数据绑定对象的子属性，您需要使用点表示法（.）。此行<label>coords:[[ results::lat ]], [[ results::lon ]]</label>应更改为<label>coords:[[ results.lat ]], [[ results.lon ]]</label>
我还会将lat和lon更改为计算属性，这些属性会返回默认值（或者仅使用google-map元素上的属性）或搜索结果中的值。

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

1 个答案: