Google 地圖( 原理) - Webduino 實戰智慧插座教學

文章推薦指數： 80 %
投票人數：10人

專案建立之後，點選「啟用API」，新增我們在地圖操作所需的API。

啟用API. 這裡要使用的是「Google Maps JavaScript API」和「Google Maps JavaScript API」，Google Maps ... Google地圖(原理) 在行車記錄器與網路發達的年代，應該都有用過GoogleMaps，甚至也看過許多把感測器資訊拋到GoogleMaps上頭顯示的實例(目前最夯的大概就是PM2.5)，接下來兩篇將會實作GoogleMaps和Webduino的應用，並且在上頭顯示開關燈資訊，例如某地的電燈打開了，在地圖上的小燈泡也會跟著打開，甚至點選地圖上的小燈泡，也可以控制那個地方真正的燈泡！ 這篇將會介紹基本的控制原理(啟用API、金鑰、基礎地圖操控、加入地址資訊)，當我們已經熟稔Google地圖的用法後，下一篇就會透過Webduino將燈泡資訊顯示在地圖上。

啟用API 要使用GoogleMaps首先要進入GoogleAPIConsole，在上面Google提供了各式各樣的服務，而且每種服務都有提供一個以上的API讓開發者使用。

連結：GoogleAPIConsole 登入進去之後，建立一個專案。

專案建立之後，點選「啟用API」，新增我們在地圖操作所需的API。

這裡要使用的是「GoogleMapsJavaScriptAPI」和「GoogleMapsJavaScriptAPI」，GoogleMapsJavaScriptAPI是主要的API，GoogleMapsJavaScriptAPI則是幫我們轉換地點。

(不然就只能輸入經緯度) 點選API名稱將其一一啟用。

資訊主頁的下方會顯示啟用了哪些API。

申請憑證 接著就是要申請憑證，畢竟Google也是要賺錢，不會讓你白白用他的服務。

(不過一定的流量內的確是讓你白白用沒錯ㄎㄎ) 這邊我選擇第一個，建立API金鑰，也就是只要有這個金鑰就可以使用剛剛的API了。

為了安全性起見，通常都會勾選下面的一些設定。

如果你要在本地端測試，可以勾選HTTP參照網址，允許localhost:3000/*即可。

(port自訂) 地圖操作 要使用Google地圖除了剛剛的API與金鑰之外，最重要的就是閱讀開發者網站：GoogleMapsAPI，裡面提供相當多的API用法以及範例介紹，因為我們是使用Web控制，就直接點選Web進入。

參考資源：GoogleMapsJavaScriptAPIV3Reference 首先我們來做第一個範例，在畫面上放入一個div載入地圖，接著透過.Map的方法定義中心點，lat是緯度latitude，lng是經度longitude，zoom數字越大放越大，而最下面的Script就是你的金鑰以及要執行的流程名稱。

參考：https://developers.google.com/maps/documentation/javascript/tutorial?hl=zh-tw

html,body{height:100%;margin:0;padding:0;} #map{height:100%;} varmap; functioninitMap(){ map=newgoogle.maps.Map(document.getElementById('map'),{ center:{lat:25.04,lng:121.512}, zoom:18 }); } 當你執行這個網頁的時候，回到API管理員裡面，就可以看到取用的次數，基本上一般使用都不會爆量，當然如果爆量就不能用了，或是要花錢買更大的數量來使用。

加入地圖標記Marker 會使用地圖之後，接著來試試看在地圖裡加入「Marker」，因為會共用到經緯度，所以用一個變數來裝經緯度的物件，然後這裡會透過newgoogle.maps.Marker的方法來新增一個marker到地圖上。

參考：https://goo.gl/D4TGqQ varmap; varmyLatLng={lat:25.04,lng:121.512}; functioninitMap(){ map=newgoogle.maps.Map(document.getElementById('map'),{ center:myLatLng, zoom:18 }); varmarker=newgoogle.maps.Marker({ position:myLatLng, map:map, title:'這是總統府' }); marker.setMap(map); } 也可以透過marker的屬性icon來指定marker的圖片。

如果把marker集合成一個陣列，就可以標記多個marker在地圖上。

(如果使用.setMap(null)就可以清除該marker) functioninitMap(){ varmap; varmarkers=[]; map=newgoogle.maps.Map(document.getElementById('map'),{ center:{lat:25.04,lng:121.512}, zoom:14 }); //建立地圖marker的集合 varmarker_config=[{ position:{lat:25.04,lng:121.512}, map:map, title:'總統府' },{ position:{lat:25.035,lng:121.519}, map:map, title:'中正紀念堂' }]; //標出marker marker_config.forEach(function(e,i){ markers[i]=newgoogle.maps.Marker(e); markers[i].setMap(map); }); } 資訊視窗Infowindows Infowindows是在點選maker的時候會彈出來的資訊視窗，透過newgoogle.maps.InfoWindow可以建立一個新的資訊視窗，內容就是純HTML，可以用CSS控制，亦可放入圖片。

varcontentString=‘網頁內容’;//要顯示的HTML內容 varinfowindow=newgoogle.maps.InfoWindow({ content:contentString }); marker.addListener('click',function(){ infowindow.open(map,marker);//設定點選marker打開資訊視窗事件 }); 同樣的可以用一個陣列，放入多組不同的內容，是其對應到不同的marker裡面。

加入地址資訊，輸入地址就可標記位置 透過google.maps.Geocoder()可以解析地址，將地址轉換成對應的經緯度，回傳之後存在results[0].geometry.location內，就可以標記出對應的地點。

參考：https://developers.google.com/maps/documentation/javascript/geocoding?hl=zh-tw vargeocoder=newgoogle.maps.Geocoder(); geocoder.geocode({'address':address},function(results,status){ if(status==google.maps.GeocoderStatus.OK){ map.setCenter(results[0].geometry.location); varmarker=newgoogle.maps.Marker({ map:map, position:results[0].geometry.location }); }else{ alert("Geocodewasnotsuccessfulforthefollowingreason:"+status); } }); 不過因為每次都要寫這樣一段實在有點複雜，原本是想要用return把地址轉出來的經緯度吐出來，不過發現沒辦法，所以這邊用一個流程_geocoder把它包起來，裡面包含一個callback的流程，這樣就可以重複利用了。

functioninitMap(){ varmarkers=[]; varinfoWindows=[]; varloaction; vargeocoder=newgoogle.maps.Geocoder(); varinfo_config=[ '

總統府

'+ '這是總統府喔！
'+ '
'+ '(圖片取自總統府網站)', '

民主紀念館

'+ '不是中正紀念堂喔
'+ '
'+ '(圖片取自民主紀念館網站)' ]; //建立地圖marker的集合 varmarker_config=[{ address:'總統府' },{ address:'台灣民主紀念館' }]; //geocoder主程式 function_geocoder(address,callback){ geocoder.geocode({ address:address },function(results,status){ if(status==google.maps.GeocoderStatus.OK){ loaction=results[0].geometry.location; callback(loaction);//用一個callback就不用每次多寫上面這段 } }); } //使用地址或名稱標出位置 _geocoder('總統府',function(address){ varmap=newgoogle.maps.Map(document.getElementById('map'),{ center:address, zoom:14 }); //設定資訊視窗內容 info_config.forEach(function(e,i){ infoWindows[i]=newgoogle.maps.InfoWindow({ content:e }); }); //標出marker marker_config.forEach(function(e,i){ _geocoder(e.address,function(address){ varmarker={ position:address, map:map } 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/moro/1/edit?html,output 小結 今天的重點大致上就到這邊，如果你前面都有實作出來，基本上就已經可以隨心所欲的操控地圖了。

下一篇將會透過Webduino，實際把燈泡和Google地圖結合，如果沒有先透過這篇的原理介紹，實際上要合併的時候，腦袋就會冒出許多問號了。

參考： https://developers.google.com/maps/documentation/javascript/3.exp/reference?hl=zh-tw https://developers.google.com/maps/documentation/javascript/geocoding?hl=zh-tw GoogleAPIConsole 聯絡我們 如果對於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相關問題 其它問題

請為這篇文章評分？

延伸文章資訊