Polymer 淺嚐元件使用

DAY 3

你不能不知道的Polymer開發實戰系列第 3 篇

鐵人賽 google map polymer webcomponents

martyshu

2014-09-23 17:58:05

4774 瀏覽

分享至

今日目標: 了解與使用GoogleMap元件

今天就來感受一下使用元件的快感，昨天雖然裝完Polymer核心和Marterial元件後，已經有數十個元件可以使用，不過並不包含 GoogleMap元件。

我們知道Google提供了相當多的服務，例如GoogleMap、Youtube、GoogleDrive等，這些服務都有JavaScript API可供使用。但是如果強調元件觀點來使用，這些API是不是應該包裝成元件才好用呢?

GoogleMap API

答案是肯定的，因此Google使用Polymer包裝了常用的Google API，而且都已經放在Github，其中就包含了GoogleMap

所以我們一樣透過Bower來安裝使用吧...

➜  itironman  bower install --save GoogleWebComponents/google-map

裝好後，就可以寫個html來測試了，以下是範例Code
it_ironman_day03_1.html

   <script src="bower_components/platform/platform.js"></script>
   <link rel="import"href="bower_components/google-map/google-map.html">
   <style>
     google-map {
       display: block;
       height: 600px;
     }
   </style>
 
 
    <google-map latitude="22.605153" longitude="120.301125"
           showCenterMarker zoom="18">
    </google-map>

寫好存檔(itironman目錄下)後，啟動WebServer....

➜  itironman  serve
serving /Users/marty/itironman on port 3000

打開瀏覽器，確認Google Map出現了，本機Polymer開發環境Ready
http://localhost:3000/it_ironman_day03_1.html

接下來說明一下這HTML的內容

1.載入polymer，讓瀏覽器使用 Web Components

2.載入 google-map 元件，這樣我們就可以使用 <google-map>這HTML標籤了

3.設定google-map為block元素，高度600px

google-map {
   display: block;
   height: 600px;
}

4.使用google-map標籤，透過屬性設定經緯度，以及顯示中心坐標。更多相關屬性可以查 Github-GoogleWebComponents

<google-map latitude="22.605153" longitude="120.301125"
           showCenterMarker zoom="18">
</google-map>

OK，打開瀏覽器等網頁載入<google-map>標籤並顯示地圖，這只是顯示WebComponent UI而已，我們可以進一步設定屬性或呼叫WebComponent所提供的方法來控制WebComponent的行為。

舉個例，一開始我們直接在HTML的<google-map>標籤中設定 zoom='18' ，但我們其實也可以透過JavaScript取得google-map元素後，進行控制。

//改變地圖顯示比例

document.querySelector('google-map').zoom = 17

//改變地圖顯示種類

document.querySelector('google-map').mapType = "hybrid"

用法上實在太方便了，不過開發元件的人會不會很辛苦? 一點都不會，Polymer已經把data-binding包好了，挖google-map元件的code出來看看

google-map 監聽zoom屬性異動寫法 (官方API)

原來 xxxChanged 就可以取得xxx屬性異動，這對開發元件的確很友善

另外也可以透過observe來綁定屬性異動與方法呼叫 (官方API)，不過今天只是淺嚐，明天先談談元件間的互動 (Template + Data-binding)，等之後談到打造自己的元件時再回頭來玩 XD

附註:

1.google-map 元件的原始碼在哪?

當我們用bower裝好元件後，元件的原始碼都在bower_components/google-map 目錄下了，也就是我們載入google-map標籤的位置

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

Polymer 安裝

Polymer 元件應用

系列文

你不能不知道的Polymer開發實戰共 30 篇

RSS系列文訂閱系列文

8 人訂閱

完整目錄

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

31 則留言

s63232

iT邦新手 5 級 ‧ 2014-12-18 20:28:57

您好，我的windows始終無法成功安裝Google Map API

步驟進行到當我在cmd輸入bower install --save GoogleWebComponents/google-map

最後都會出現Additional error details:
fatal: read error: Invalid argument

而不會出現google-map的資料夾...

懇請幫助!!!

回應
檢舉

你不能不知道的Polymer開發實戰系列 第 3 篇