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>

我們去了！