时间戳

首页 > 解决方案 > 谷歌聚合物搜索结果的位置和半径被忽略

javascript - 谷歌聚合物搜索结果的位置和半径被忽略

问题描述

我正在尝试将标记设置为特定地址并显示半径 500m 内的附近餐馆。显示了标记和餐馆，但忽略了半径。我总是得到 20 家餐厅的结果。我也在考虑按距离排名并减少元素的数量，但无法让它发挥作用。

<div slot="content"
            title="">
            <div class="title">[[title]]</div>

            <google-map-search id="gps"
                               map="[[map]]"
                               query="[[mapQuery]]"
                               results="{{results}}">
            </google-map-search>

            <google-map-search id="restaurantID"
                               map="[[map]]"
                               query="[[mapQuery]]"
                               location="[[location]]"
                               radius="[[radius]]"
                               types="[[types]]"
                               results="{{restaurantResults}}">

            </google-map-search>

            <div class="map">
                <google-map map="{{map}}"
                            id="map"
                            fit-to-markers
                            longitude="[[longitude]]"
                            latitude="[[latitude]]"
                            api-key="[[googleMapApiKey]]"
                            disable-map-type-control
                            disable-street-view-control
                            singleInfoWindow
                            styles="[[mapStyles]]">

                    <template is="dom-repeat"
                              items="{{results}}"
                              as="marker">
                        <google-map-marker latitude="{{marker.latitude}}"
                                           longitude="{{marker.longitude}}"
                                           label="A">   
                            <h2>{{marker.name}}</h2>
                            <span>{{marker.formatted_address}}</span>
                        </google-map-marker>
                    </template>

                    <template is="dom-repeat"
                              items="{{restaurantResults}}"
                              as="marker">
                        <google-map-marker latitude="{{marker.latitude}}"
                                           longitude="{{marker.longitude}}"
                                           label="B"> 
                            <h2>{{marker.name}}</h2>
                            <span>{{marker.formatted_address}}</span>
                        </google-map-marker>
                    </template>

                </google-map>
            </div>
        </div>

我的属性是

static get properties() {
            return {
                title: {
                    type: String
                },
                fields: {
                    type: Array,
                    value: ["str", "plz"]
                },
                googleMapApiKey: {
                    type: String,
                    observer: '_googleMapAPIkeyChanged'
                },
                mapQuery: {
                    type: String
                },
                location: {
                    type: Object,
                    //readOnly: true
                },
                radius: {
                    type: Number,
                    value: "500"
                },
                types: {
                    type: String,
                    value: "restaurant"
                },
            };
        }

后来我设置 this.location = {lat: my_lat, lng: my_lng}。但是位置和半径被忽略了。结果仅取决于给定的 mapQuery。我认为原因是 search() 函数是一个 textSearch() 但在这种情况下我需要一个附近的search()。

当我使用https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=my_lat,my_lng&radius=500&types=restaurant&key= "my_key" 我得到我需要的结果（在我的情况下为 8）。
但是使用 textsearch 而不是附近的搜索，我得到了 20 个元素，其中一些在我的 500m 半径之外。

标签： javascriptpolymer

解决方案

我自己解决了。我将标记项重命名为 restaurantResultsView。这样我可以过滤原始的 restaurantResults。

推荐阅读