D - 缓存搜索结果

然而，我们的目标是

• 列出一个地方
• 在地图上标记所有这些，
• 使用搜索框标记我们选择的任何其他地方

我们有一个搜索框，用户可以一次搜索一个查询。为了适应多个查询，我们需要在显示标记并将其固定在地图上之前缓存每个查询的结果

所以，让我们补充一下

• 属性表示接受一系列位置的位置
• 一个 Property 缓存，它将每个查询的结果存储在传递给我们的自定义元素的位置数组中

cache:{
 
type:Object
 
},
 
locations:{
 
type:Object
 
}

接下来，我们编写一个函数来缓存每个搜索结果，这是通过搜索位置数组中的每个位置得到的。

这很简单！

我们已经将结果收集到一个名为 results 的属性中，然后我们循环显示标记。

我们现在需要做的就是将每个搜索结果推送到一个数组中，我们的缓存就完成了！

我们需要使用事件来触发缓存。该事件被称为“on-google-map-search-result”，并且在元素 google-map-search 完成搜索后被触发。

因此，“on-google-map-search-result”，我们将一个函数称为 cacher，将当前搜索结果缓存到名为 cache 的属性中。

<google-map-search map=[[map]] query=[[searchQuery]] on-google-map-search-results=cacher>

注意：

通常，要将项目推入数组，我们使用 vanilla push 方法

例如：NewYork 说，我有一个新的地方可以添加到我要标记的地方列表中。

如果我要将其添加到的数组称为位置，我会写

locations.push('New York');

但是，在我们的例子中，我们需要将 google-map-search 的任何结果推送到一个名为 cache 的数组中。然后我们需要在包含最新结果的缓存中循环。不是现有的缓存。

现在，我们使用 dom-repeat 模板遍历结果并在地图上放置标记。

但是，如果我们像这样传递一个位置数组：

<g-map locations=["Iceland","Argentina","London"]></g-map>

然后，我们的自定义元素的 results 属性将被覆盖该数组中的每个项目。

因此，我们将 cacher 方法称为 on-google-map-search-results 事件，并将当前结果推送到缓存属性中。

这不像上面的说明中的香草推动。

我们需要让 dom-repeater 知道，我们的缓存已被每次新搜索覆盖。

因此，我们使用 Polymer 推出的特殊推送，如下所示：

cacher: function() {
this.push('cache', this.results);
}

在我们之前写的搜索功能之后添加该功能。

语法暗示，要通过添加属性结果的当前值以及使用缓存属性循环的任何 dom-repeater 来突变属性缓存，将通知突变。

最后，我们将 dom-repeat 模板更改为循环缓存，而不是结果

注意：

cache 是​​一个数组数组。

缓存数组的每个元素都是一个结果数组

所以我们的 dom-repeater 会是这样的：

<template id="resultList" is="dom-repeat" items="[[cache]]">
 
    <template is="dom-repeat" items="[[item]]" as="marker">
 
        <google-map-marker latitude="{{marker.latitude}}" longitude="{{marker.longitude}}">
            <h2>{{marker.name}}</h2>
            <span>{{marker.formatted_address}}</span>
        </google-map-marker>
    </template>
</template>

非常好！ 我们将自定义元素全部编码并准备好使用！

让我们通过从 index.html 传递一系列位置来测试它吗？

<g-map
 
api-key="AIzaSyBLc_T17p91u6ujSpThe2H3nh_8nG2p6FQ"
 
locations='["Boston","NewYork","California","Pennsylvania"]'>
</g-map>

我们去了！