Google 地圖( 前後端實作) - Webduino 實戰智慧插座教學
文章推薦指數： 80 %
經過上一篇的洗禮之後，對於地圖控制應該都能掌握了，再來就要進入「實戰」的部分，在地圖的程式裡頭加入Webduino 的程式碼，就可以在地圖裡顯示燈泡狀態。
Google地圖(前後端實作)
經過上一篇的洗禮之後，對於地圖控制應該都能掌握了，再來就要進入「實戰」的部分，在地圖的程式裡頭加入Webduino的程式碼，就可以在地圖裡顯示燈泡狀態。
更換Marker圖示
因為要顯示燈泡訊息，所以我們要預備兩張燈泡圖片給Marker使用(一張開燈，一張關燈)，這樣在地圖上才會透過Marker，清楚看到這個地點的燈泡是亮還是暗，然後記得圖片要用成背景透明的png檔案。
沿用上一篇最後一個範例的程式碼，如果更換Marker圖片，只需要在Marker的設定檔多增加一個icon的屬性，然後把圖片網址放進去，我這邊預設放入的圖片是「關燈」的圖片。
varmarker_config=[{
address:'總統府',
icon:'http://example.oxxostudio.tw/it2016/it2016-day22-off.png'
}];
然後記得更換玩，在下方的屬性也要加進去icon屬性
marker_config.forEach(function(e,i){
_geocoder(e.address,function(address){
//下方新增icon屬性
varmarker={
position:address,
map:map,
icon:e.icon
}
markers[i]=newgoogle.maps.Marker(marker);
markers[i].setMap(map);
markers[i].addListener('click',function(){
infoWindows[i].open(map,markers[i]);
});
});
});
完整程式碼，記得換成自己的金鑰：http://bin.webduino.io/favut/1/edit?html,output
執行網頁應該就可以看到一個燈泡圖案出現在地圖上了。
只有這樣還不夠，如果我們希望觸發某個事件之後就更換燈泡圖案，該怎麼做呢？這時候我們就會需要用到.setIcon這個方法，下面這段程式，表示在兩秒之後，會把地圖上的燈泡從熄滅換成打開。
setTimeout(function(){
markers[0].setIcon('http://example.oxxostudio.tw/it2016/it2016-day22-on.png');
},2000);
不過其實這樣還是會有點風險，因為我們不能確保兩秒後marker的初始化已經完成，所以最好的做法是在初始化marker的當下，就進行setIcon的動作，下面這段程式表示當我們打開網頁，Marker初始化完成之後，就會自動變成開燈的圖案。
(如果你有許多的marker也是一樣，要確保所有marker都初始化完成才能繼續)
marker_config.forEach(function(e,i){
_geocoder(e.address,function(address){
varmarker={
position:address,
map:map,
icon:e.icon
};
markers[i]=newgoogle.maps.Marker(marker);
markers[i].setMap(map);
markers[i].addListener('click',function(){
infoWindows[i].open(map,markers[i]);
});
_setIcon(markers[i],'http://example.oxxostudio.tw/it2016/it2016-day22-on.png');
});
});
function_setIcon(e,icon){
e.setIcon(icon);
}
完整程式碼：http://bin.webduino.io/jekoj/1/edit?html,js,output
編輯資訊視窗InfoWindow內容
接著想要在資訊視窗infowindow裡面顯示「地點名稱」、「時間」，並放入一個按鈕，這樣如果不點選燈泡圖案開關的話，點選這個按鈕一樣可以作切換，所以這邊也需要另外兩張按鈕的圖片，一張打開，一張關起來，這邊就不一定要png了，用jpg也可以，而且也不見得要「兩張」，如果會寫CSS的話，做在同一張然後用background-position切換就可以。
要編輯資訊視窗內容可以編輯前一個範例的資訊視窗設定檔info_config，內容基本上就是純HTML，這邊我一樣用一個h2放地點位置，span顯示現在時間，img則是開關圖片，兩者都可以透過CSS來進行設定。
varinfo_config=[
'總統府
'+
'
'+
''+
''
];
新增加兩個流程，一個是資訊視窗內容的流程，另外一個則是獲取當前時間的流程，這邊透過setInterval每秒獲取新的時間來做改變，然而為了因應多個Marker，所以我們在顯示的名稱上勢必要有所區隔，這裡在每個顯示div的後方都加個數字，這些數字是由Marker產生，所以可以確定每個資訊視窗都會對應到自己的Marker。
function_content(e){
setInterval(function(){
$('#infoDiv'+e+'span').text(getTime());
},1000);
}
functiongetTime(){
vardate=newDate();
varh=date.getHours();
varm=date.getMinutes();
vars=date.getSeconds();
if(h<10){
h='0'+h;
}
if(m<10){
m='0'+m;
}
if(s<10){
s='0'+s;
}
varnow=h+':'+m+':'+s;
returnnow;
}
記得可以透過google.maps.event.addListener監聽資訊視窗的內容是否準備好，如果準備好，就綁定對應的流程。
//設定資訊視窗內容
info_config.forEach(function(e,i){
infoWindows[i]=newgoogle.maps.InfoWindow({
content:e
});
//設定監聽事件，在資訊視窗準備好之後，就綁定對應的流程
google.maps.event.addListener(infoWindows[i],'domready',function(){
_content(i);
});
});
完整程式碼：http://bin.webduino.io/zule/1/edit?html,js,output
按鈕與Marker連動
為了讓資訊視窗內的按鈕可以和Marker連動，這邊多做了一些修改，由s變數判斷是否按下開關，並且決定開關的背景圖片位置(看起來就會是打開和關起來)，然後透過_setIcon來更改Marker的樣子。
function_content(e){
timer[e]=setInterval(function(){
$('#infoDiv'+e+'span').text(getTime());//顯示當下時間
},1000);
$('#infoDiv'+e+'div').on('click',function(){
s=s*-1;
if(s<0){
$(this).css({
'background-position':'-70px0'
});
_setIcon(markers[e],'http://example.oxxostudio.tw/it2016/it2016-day22-off.png');
}else{
$(this).css({
'background-position':'00'
});
_setIcon(markers[e],'http://example.oxxostudio.tw/it2016/it2016-day22-on.png');
}
});
}
因為一開始就考量到多個Marker的影響，所以如果你有兩個Marker，基本上執行之後也會是正常運作的。
完整程式碼：http://bin.webduino.io/ninac/1/edit?html,js,output
加入Webduino與真正的燈泡連動
首先一樣在HTML的head要引入對應的JavaScript
varled=[];
varboardNum=0;
再來就是把boardReady在地圖開始之後在執行，避免裝置沒上線地圖也出不來的窘境，然後把剛剛內容的流程獨立成一個ready的流程。
//使用地址或名稱標出起始中心點位置
_geocoder('總統府',function(address){
map=newgoogle.maps.Map(document.getElementById('map'),{
center:address,
zoom:14
});
//設定資訊視窗內容
info_config.forEach(function(e,i){
infoWindows[i]=newgoogle.maps.InfoWindow({
content:e
});
//設定監聽事件，在資訊視窗準備好之後，就綁定對應的流程
google.maps.event.addListener(infoWindows[i],'domready',function(){
_content(i);
});
});
//設定開發版裝置連線
boardReady('第一塊裝置ID',function(board){
board.systemReset();
board.samplingInterval=250;
led[0]=getLed(board,10);//設定第一塊裝置的電燈接腳
boardNum=boardNum+1;
if(boardNum===2){
ready();//裝置都上線後執行
}
});
boardReady('第二塊裝置ID',function(board){
board.systemReset();
board.samplingInterval=250;
led[1]=getLed(board,10);//設定第二塊裝置的電燈接腳
boardNum=boardNum+1;
if(boardNum===2){
ready();//裝置都上線後執行
}
});
});
裝置都上線之後要執行的ready流程長這樣，在上線之後再定義marker。
//開發裝置連線後要執行
functionready(){
//定義各個marker
marker_config.forEach(function(e,i){
_geocoder(e.address,function(address){
varmarker={
position:address,
map:map,
icon:e.icon
};
//把每個marker按照設定檔標記到地圖上
markers[i]=newgoogle.maps.Marker(marker);
markers[i].setMap(map);
//綁定每個marker的點擊事件
markers[i].addListener('click',function(){
infoWindows[i].open(map,markers[i]);
});
});
});
}
最後不要忘記在點選開關的程式，要加入led.on和led.off的指令，這樣才能夠真正控制電燈。
//設定marker圖案
function_setIcon(e,icon){
e.setIcon(icon);
}
function_content(e){
//顯示時間(每秒變動)
setInterval(function(){
$('#infoDiv'+e+'span').text(getTime());
},1000);
$('#infoDiv'+e+'div').on('click',function(){
s=s*-1;
if(s<0){
led[e].off();//關閉電燈
$(this).css({
'background-position':'-70px0'
});
//更換marker圖案為關燈
_setIcon(markers[e],'http://example.oxxostudio.tw/it2016/it2016-day22-off.png');
}else{
led[e].on();//點亮電燈
$(this).css({
'background-position':'00'
});
//更換marker圖案為開燈
_setIcon(markers[e],'http://example.oxxostudio.tw/it2016/it2016-day22-on.png');
}
});
}
完整程式碼：http://bin.webduino.io/nofok/1/edit?html,js,output
到這邊執行網頁後，我們就可以在地圖上操控電燈，地圖上也會顯示電燈目前的狀態囉！
小結
其實Google提供了相當多好用的服務給我們使用，如果能夠熟悉這些網路服務，相信跟生活周遭用品結合，才是真正「物聯網」的精髓吧！
最後，GoogleMaps的API非常有用，一定要好好閱讀的。
https://developers.google.com/maps/documentation/javascript/reference?hl=zh-tw#InfoWindow
聯絡我們
如果對於Webduino產品有興趣，歡迎透過下列方式購買：
個人線上購買：https://store.webduino.io/(支援信用卡、超商取貨付款)
企業＆學校採購：來信[email protected]或來電07-3388511。
如果對於這篇教學有任何問題或建議，歡迎透過下列方式聯繫我們：
Email：[email protected](如對於產品有使用上的問題，建議透過Email附上照片或影片聯繫)
Facebook粉絲團：https://www.facebook.com/webduino/
Facebook技術討論社團：https://www.facebook.com/groups/webduino/
Webduino基礎教學
Webduino開發板
馬克一號(介紹)
馬克一號(初始化設定)
WebduinoFly(介紹)
WebduinoFly(初始化設定)
WebduinoSmart(介紹)
WebduinoSmart(初始化設定)
開發板擴充設定
Arduino韌體下載與燒錄
使用WebSocket操控
WebduinoBlockly
認識WebduinoBlockly
WebduinoBlockly基本操作
WebduinoBlockly特殊功能
連動多塊開發板
腳位偵測設定
發光元件
LED
三色LED
LED點矩陣
輸入輸出
繼電器
蜂鳴器
按鈕開關
震動開關
搖桿
紅外線發射接收
環境偵測
超音波偵測
溫濕度偵測
人體紅外線偵測
聲音偵測
光敏電阻
可變電阻
土壤濕度偵測
三軸加速度計
無線感應
RFID
玩具及馬達
伺服馬達
Webduino綜合應用
元件應用
LED(兩顆交互閃爍)
LED(霹靂燈)
LED(語音聲控)
LED(人臉追蹤)
LED(Google表單操控)
三色LED(調色盤)
蜂鳴器(多人協奏)
蜂鳴器(會說話的鬧鐘)
傳感器應用
超音波(改變圖片大小)
超音波(控制LED)
超音波(控制三色LED)
溫濕度(Firebase紀錄)
RFID(控制Youtube)
可變電阻(改變Youtube音量)
聲音偵測(吹點矩陣蠟燭)
玩具改造
Smart自走車(組裝步驟)
Smart自走車(網頁遙控器操控)
Smart自走車(超音波避障)
Smart自走車(溫濕度感測車)
Smart智慧路燈(組裝步驟)
Smart智慧路燈(接線教學)
Smart飛天車(組裝步驟)
Smart飛天車(接線教學)
馬克一號自走車(鍵盤操控)
馬克一號自走車(行動裝置操控)
馬克一號自走車(循跡功能)
WABot機器人(初始化設定)
WABot機器人(基礎操控)
百元玩具車大改造
智慧生活
智慧植栽(水泵)
智慧插座(組裝與操控)
智慧追蹤(伺服馬達+攝影機)
Webduino雲端平台
基本介紹
註冊與登入
Blockly程式積木
Device裝置管理(裝置認證)
Device裝置管理(雲端更新)
兌換券(領取與添加新功能)
發光元件
LCD螢幕
七段顯示器
輸入輸出
MP3播放器
環境偵測
PM2.5細懸浮微粒偵測
顏色感測器
電子羅盤
光度計
溫濕度計
資料庫
Google試算表(設定)
Google試算表(儲存)
Google試算表(讀取)
綜合應用
記錄PM2.5(Google試算表)
玩具改造
Smart智慧小屋（組裝步驟）
Blockly教學
基本功能
變數
流程
文字
數學式
列表
邏輯
迴圈
進階功能
控制台
等待
數值轉換
鍵盤行為
語音聲控
語音朗讀
行動裝置
網頁互動區
文字、點擊、圖片
顏色、按鈕、拉霸
遙控器
Youtube
影像追蹤
創意應用
抽籤並朗讀姓名
大樂透自動選號
隨機組合朗讀語句
語音朗讀逐字稿
小時鐘
語音報時
九九乘法你問我答
BlocklyGames
迷宮
鳥
烏龜
影片
池塘導師
Dr.Smart教學
開發板元件
三色LED
三色LED(色彩輪播)
光敏電阻
光敏電阻(色彩變化)
按鈕開關
按鈕開關(控制顏色)
按鈕開關(控制Youtube)
元件及傳感器
LED
蜂鳴器
震動開關
LED點矩陣
超音波偵測
溫濕度偵測
綜合應用
蜂鳴器(多人協奏)
超音波(倒車雷達)
超音波(控制Youtube)
LED點矩陣(顯示距離)
LED點矩陣(顯示溫度)
按鈕開關(控制蜂鳴器)
實戰智慧插座
基本操控
組裝智慧插座
網頁操控智慧插座
傳感器應用
超音波偵測距離
光線偵測
人體紅外線偵測
聲音偵測
電視機遙控器
按鈕開關
電流急急棒
土壤濕度偵測
RFID感應
進階應用
語音辨識
人臉、顏色追蹤
手機陀螺儀
聊天室(原理)
聊天室(前後端實作)
Google試算表(原理)
Google試算表(前後端實作)
Google地圖(原理)
Google地圖(前後端實作)
Youtube互動
Opendata實作
Node-Red(基礎操作)
Node-Red(Twitter)
Node-Red(E-mail)
日幣匯率(Node-Red爬蟲)
日幣匯率(Node-js爬蟲)
常見問題
Webduino相關
關於Webduino
購買Webduino產品
技術支援與合作
Webduino開發板
關於Webduino開發板
連線相關＆初始化設定問題
Web:Bit相關問題
WebduinoSmart相關問題
其它問題
延伸文章資訊
- 1Google 地圖- 導航和大眾運輸- Google Play 應用程式
善用Google 地圖，遨遊世界變得更加輕鬆寫意。Google 地圖涵蓋了超過220 個國家/地區和領域，還有數億筆商家和地點資料。取得GPS 即時導航、車流量和大眾運輸資訊，並 ...
- 2要前往Google 地圖應用程式嗎？
要前往Google 地圖應用程式嗎？ 這個連結只能在Google 地圖應用程式中開啟 瞭解詳情. 前往應用 ...
- 3Google地圖- 維基百科，自由的百科全書
Java：2006年，Google發佈了一個Java程式稱為Google Maps for Mobile（頁面存檔備份，存於網際網路檔案館），可以用在Java-based的手機上。 Palm O...
- 4Google 地圖( 前後端實作) - Webduino 實戰智慧插座教學
經過上一篇的洗禮之後，對於地圖控制應該都能掌握了，再來就要進入「實戰」的部分，在地圖的程式裡頭加入Webduino 的程式碼，就可以在地圖裡顯示燈泡狀態。
- 5Google 地圖平台
Maps SDK · Android iOS · 街景服務圖像. 在應用程式中加入360 度街景服務圖像。 ; 路線 · API. 距離矩陣. 計算多個出發地和目的地之間的交通時間和距離。 ; ...
