C - 為我們的自定義元素新增搜尋功能

Created: November-22, 2018

對於搜尋地點，我們使用 Polymer 釋出的強大元素，稱為 google-map-search。

你需要做的就是通過

一個地圖物件和
像這樣的元素的查詢字串：

<google-map-search map=[[map]] query=[[query]]></google-map-search>

我們如何傳遞地圖物件？我們從哪裡得到的？

簡單！

當你呼叫 google-map 元素時，將自定義元素的屬性對映繫結到元素的屬性對映。

所以，我們像這樣呼叫 google-map 元素：

<google-map api-key="whatever key you generated for google's javascript API" map={{map}}></google-map>

注意：

當呼叫 google-map 聚合物時，我們對上面的地圖執行雙向資料繫結。

它由花括號{{}}表示，而不是由方括號[[]]指示的單向繫結。

當我們做雙向繫結時，

每當我們的自定義元素 g-map 的 map 屬性發生變化時，都會通知 google-map 元素

和，

每當 google-map 的地圖屬性發生變化時，我們都會在自定義元素 g-map 中收到通知。

因此，在雙向資料繫結到位的情況下，只要地圖物件在 google-map 中發生更改，我們的自定義元素就會隨更改一起更新。

然後我們將地圖物件作為屬性傳遞給元素 google-map-search，這樣，任何搜尋結果都會在當前渲染的地圖中標記出來。

我們的自定義元素的 DOM 如何看待這一刻？

<template id="google-map-custom-element">
 
<google-map-search map=[[map]] query=[[query]]></google-map-search>
<google-map api-key=[[apiKey]] map={{map}}></google-map>
</template>

我們從未為自定義元素新增地圖和查詢屬性！

將註冊呼叫中的屬性新增到 Polymer

Polymer({
 
    is:"g-map",
 
    properties:{
 
        map:{
 
            type: Object
 
        },
 
        query:{
 
            type:String,
 
            value:""
 
        }
    }
 
});

現在我們已經註冊了這些房產，我們注意到，我們

將當前渲染的地圖作為物件獲取 - 通過資料繫結並將其儲存為本地屬性（也稱為 map），
有一個屬性查詢，傳遞給 google-map-search

接受使用者輸入作為搜尋查詢

但誰給我們查詢搜尋？呃！馬上？沒有人。

這正是我們接下來要做的。

讓我們新增一個搜尋表單，用於呈現地圖的使用者將用於輸入查詢。我們需要搜尋框的輸入，我們使用 Polymer 的鐵輸入。

新增搜尋表單

在檔案 g-map.html 的開頭包含必要的鐵元素

<link rel=import href=../bower_components/iron-input/iron-input.html>
<link rel=import href=../bower_components/iron-icon/iron-icon.html>
<link rel=import href=../bower_components/iron-icons/iron-icons.html>
<link rel=import href=../bower_components/iron-icons/maps-icons.html>

我們想要在左上角的搜尋表單，所以我們新增一個位置絕對的鐵輸入，以及一些 css 將它固定在那裡。

因此，在名為“map-container”的 div 中包裝我們的自定義元素的 DOM，並新增一個名為“search_form”的子 div。

<template id="google-map-custom-element">
    <div class="map-container">
         <google-map-search map="[[map]]" query="[[query]]"></google-map-search>
         <google-map api-key="[[apiKey]]"></google-map>
         <div class="search_form">
             <iron-icon icon="icons:search" on-tap=__search></iron-icon>
             <input is="iron-input" placeholder="Search Places" type=text name="search" bind-value="{{query}}">
         </div>
     </div>
 </template>

新增一些基本的 CSS 來固定我們寫在地圖右上角的搜尋表單

.search_form{
    position: absolute;
    top:10px;
    right:10px;
}
.search_form iron-icon{
    position: absolute;
    right: 1px;
    top:1px;
    cursor: pointer;
}

然後，當我們重新整理時，我們就有這個。搜尋表單位於右上角

https://i.stack.imgur.com/X9gYH.jpg

剩下要做的就是，我們通過自定義元素的查詢屬性為 google-map-search 元素提供輸入。

因此，我們將屬性 query 繫結到搜尋表單中的鐵輸入。像這樣：

<input is="iron-input" placeholder="Search" type=text name="search" bind-value="{{query}}">

注意：

我們將自定義元素的屬性查詢繫結到搜尋輸入，使用，

鐵輸入的繫結值屬性。

因此，在上面的鐵輸入中，bind-value = {{query}}確保對鐵輸入內的文字的任何更改都會通知給查詢屬性。

根據我們目前的設定，

對於使用者在搜尋框中鍵入的每個字母，會發生搜尋，這會降低地圖的速度，並消耗我們 API 金鑰的限制。

為什麼？

因為，我們的自定義元素的屬性查詢被繫結到鐵輸入，並且輸入鐵輸入的每個字母都會更改查詢的值，然後影響 html 中的
<google-map-search map="[[map]]" query="[[query]]">
導致搜尋發生

我們的解決方案很簡單隻需將 google-map-search 元素的 query 屬性繫結到單獨的屬性即可。

讓我們說，我們為自定義元素建立了一個屬性 searchQuery。

在 Polymer 呼叫中的 query 屬性下面新增它

searchQuery :{
 
    type:String
 
}

接下來，在我們的自定義元素的 DOM 中更改 google-map-search 元素呼叫中的 bind

像這樣：

<google-map-search map="[[map]]" query="[[searchQuery]]">

最後，請注意我們在搜尋表單中新增了一個鐵圖示（搜尋圖示）？

<iron-icon icon="icons:search" on-tap=search></iron-icon>

讓我們將該搜尋功能新增到我們的自定義元素中。在點選搜尋圖示時呼叫它。

在我們的搜尋方法中，我們將搜尋框中的任何內容分配給 google-map-search 的查詢屬性！

新增此功能後，聚合物中的屬性物件要求註冊。

//paste this after, the properties object
 
search: function() {
this.query = this.searchQuery;
}

非常好！所以，現在，只有點選搜尋圖示才能進行搜尋。

顯示搜尋結果

我們有

渲染地圖
將搜尋表單固定到地圖上
寫了搜尋圖示的搜尋功能

現在我們需要顯示結果。

為此，我們需要將 google-map-search 元素的結果繫結到本地屬性上。

那麼，讓我們為自定義元素 g-map 建立一個屬性，並將其命名為 duh！

在 Polymer 註冊呼叫中，在屬性宣告中新增 object 型別的屬性結果

results:{
 
type:Object
 
}

並將 google-map-search 的 results 屬性繫結到你在上面定義的本地結果屬性。

<google-map-search results={{results}} map=[[map]] query=[[query]]></google-map-search>

有了這個，讓我們重新整理頁面，並在地圖上搜尋星巴克。

StackOverflow 文件

沒啥事兒！

嗯嗯！我們只是將 google-map-search 的結果繫結到 results 屬性。我們寫了什麼東西在地圖上顯示它們嗎？沒有！

我們要。

因此，我們知道，Polymer 元素 google-map-search 會返回一系列標記作為結果。

我們需要遍歷陣列，並在地圖上放置標記。

因此，我們在元素中編寫一個 dom-repeat 模板，以顯示每個結果的標記

像這樣：

<google-map api-key=[[apiKey]] map=[[map]]>
 
    <template is="dom-repeat" items="{{results}}" as="marker">
        <google-map-marker latitude="{{marker.latitude}}" longitude="{{marker.longitude}}">
            <h2>{{marker.name}}</h2>
            <span>{{marker.formatted_address}}</span>
        </google-map-marker>
    </template>
 
</google-map>

現在重新整理，我們看到了這一點

https://i.stack.imgur.com/yCHBc.jpg

非常好！

我們已成功將搜尋功能新增到自定義元素中。

我們需要做的就是，

在我們的 index.html 中寫下這個

<g-map api-key="Whatever API key you generated"></g-map>

你會得到一張你可以搜尋的地圖！