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>

你会得到一张你可以搜索的地图！