A - 入门

简而言之，我们的自定义元素应该

• 具有内置搜索功能，可在地图上搜索和标记位置。
• Accept 一个名为 location-array 的属性，它是一个场所列表
• 有一个监听器，用于收听名为“google-map-ready”的事件。当元素加载时，会触发此事件。
  • 此侦听器应循环遍历位置数组，并将位置数组中的下一个元素指定为当前搜索查询
• 有一个叫做缓存的方法
  • 只要搜索返回结果，此方法就会缓存位置数组中每个位置的纬度和经度
• 有一个 Dom-repeat 模板，它循环缓存结果，并在每个位置删除一个标记

因此，我们的自定义元素的目的本质上意味着，如果你传递一个像这样的位置数组：

<g-map location-array='["Norway","Sweden"]'></g-map>

自定义元素

• 不仅应该在地图上标记挪威和瑞典，而且，
• 还应在地图上标记任何后续搜索 - 即，如果你搜索波士顿，在地图标记为挪威和瑞典后，波士顿也应该在地图上有一个图钉

导入依赖项

首先，让我们将我们需要的东西导入到我们的元素中。这个元素在

元件/ G-map.html

<link rel=import href="../bower_components/google-map/google-map.html">
<link rel=import href="../bower_components/google-map/google-map-marker.html">
<link rel=import href="../bower_components/google-map/google-map-search.html">
<link rel=import href="../bower_components/google-map/google-map-directions.html">

注意

上面的一些导入，不是必需的，但是很好，如果你喜欢在标记上添加功能

我们一定需要，

• 谷歌地图
• 谷歌地图标记物
• 谷歌地图搜索

此外，据推测，你知道如何通过 Bower 安装单独的 Polymer Elements

用聚合物注册我们的元素

接下来，我们将自定义元素注册为“g-map”

Polymer({
       is:"g-map" 
});

所以！ 我们的自定义元素已在 Polymer 注册。

稍后我们将添加谷歌地图搜索特定属性和我们需要的任何其他属性。

将蓝图添加到我们的自定义元素 - 通过模板

接下来，我们为自定义元素添加模板

打开 elements / g-map.html，并添加一个绑定自定义元素 DOM 的模板

<template id="google-map-with-search">
</template>

现在，将你为自定义元素编写的整个 html 和 javascript 包装在 dom-module 中。

<dom-module id="g-map">
 
    <template id="google-map-with-search">
       
    </template>
    <script>
    Polymer({
        is:"g-map",
        properties: {}
 });
     </script> 
</dom-module>

非常好！ 我们有一个基本的蓝图