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>

非常好！ 我們有一個基本的藍圖