iT邦幫忙

DAY 3
3

今日目標: 了解與使用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

<script src="bower_components/platform/platform.js"></script>

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

<link rel="import"href="bower_components/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
0
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的資料夾...

懇請幫助!!!

0
s63232
iT邦新手 5 級 ‧ 2014-12-18 20:29:09

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

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

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

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

懇請幫助!!!

0
s63232
iT邦新手 5 級 ‧ 2014-12-18 20:29:10

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

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

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

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

懇請幫助!!!

0
s63232
iT邦新手 5 級 ‧ 2014-12-18 20:29:11

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

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

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

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

懇請幫助!!!

0
s63232
iT邦新手 5 級 ‧ 2014-12-18 20:29:11

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

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

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

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

懇請幫助!!!

0
s63232
iT邦新手 5 級 ‧ 2014-12-18 20:29:12

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

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

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

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

懇請幫助!!!

0
s63232
iT邦新手 5 級 ‧ 2014-12-18 20:29:14

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

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

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

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

懇請幫助!!!

0
s63232
iT邦新手 5 級 ‧ 2014-12-18 20:29:19

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

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

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

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

懇請幫助!!!

0
s63232
iT邦新手 5 級 ‧ 2014-12-18 20:29:20

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

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

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

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

懇請幫助!!!

0
s63232
iT邦新手 5 級 ‧ 2014-12-18 20:29:20

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

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

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

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

懇請幫助!!!

0
s63232
iT邦新手 5 級 ‧ 2014-12-18 20:29:59

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

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

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

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

懇請幫助!!!

0
s63232
iT邦新手 5 級 ‧ 2014-12-18 20:29:59

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

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

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

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

懇請幫助!!!

0
s63232
iT邦新手 5 級 ‧ 2014-12-18 20:30:02

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

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

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

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

懇請幫助!!!

0
s63232
iT邦新手 5 級 ‧ 2014-12-18 20:30:03

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

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

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

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

懇請幫助!!!

0
s63232
iT邦新手 5 級 ‧ 2014-12-18 20:30:03

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

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

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

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

懇請幫助!!!

0
s63232
iT邦新手 5 級 ‧ 2014-12-18 20:30:03

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

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

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

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

懇請幫助!!!

0
s63232
iT邦新手 5 級 ‧ 2014-12-18 20:30:03

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

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

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

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

懇請幫助!!!

0
s63232
iT邦新手 5 級 ‧ 2014-12-18 20:30:03

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

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

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

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

懇請幫助!!!

0
s63232
iT邦新手 5 級 ‧ 2014-12-18 20:30:04

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

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

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

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

懇請幫助!!!

0
s63232
iT邦新手 5 級 ‧ 2014-12-18 20:30:04

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

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

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

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

懇請幫助!!!

0
s63232
iT邦新手 5 級 ‧ 2014-12-18 20:30:04

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

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

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

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

懇請幫助!!!

0
s63232
iT邦新手 5 級 ‧ 2014-12-18 20:30:04

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

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

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

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

懇請幫助!!!

0
s63232
iT邦新手 5 級 ‧ 2014-12-18 20:30:04

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

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

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

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

懇請幫助!!!

0
s63232
iT邦新手 5 級 ‧ 2014-12-18 20:30:05

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

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

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

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

懇請幫助!!!

0
s63232
iT邦新手 5 級 ‧ 2014-12-18 20:30:26

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

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

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

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

懇請幫助!!!

0
s63232
iT邦新手 5 級 ‧ 2014-12-18 20:30:26

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

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

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

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

懇請幫助!!!

0
s63232
iT邦新手 5 級 ‧ 2014-12-18 20:30:26

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

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

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

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

懇請幫助!!!

0
s63232
iT邦新手 5 級 ‧ 2014-12-18 20:30:26

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

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

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

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

懇請幫助!!!

0
s63232
iT邦新手 5 級 ‧ 2014-12-18 20:30:27

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

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

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

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

懇請幫助!!!

0
s63232
iT邦新手 5 級 ‧ 2014-12-18 20:30:27

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

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

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

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

懇請幫助!!!

0
s63232
iT邦新手 5 級 ‧ 2014-12-18 20:32:41

==留言系統有問題...我不是故意PO這麼多次的...

我要留言

立即登入留言