設備面板:詳情
一個炫酷的詳情頁怎么能少得了地圖呢？
Thingsboard很貼心的為我們內置了地圖的部件庫。
一、地圖
地圖顯示的核心是位置信息，也就是我們常聽到的坐標，
坐標系是坐標產生的參考背景，常見坐標系如下：
GCJ-02高德地圖、騰訊地圖以及谷歌中國區地圖使用的是GCJ-02坐標系BD-09百度地圖使用的是BD-09坐標系WGS-84底層接口 (HTML5 Geolocation或ios、安卓API)通過GPS設備獲取的坐標使用的是WGS-84坐標系
坐標是在坐標系上的位置點，一般用經緯度表示：
longitude經度latitude緯度
可以搜索經緯度查詢定位查詢地址的經緯度。
二、地圖部件
添加部件
像往常一樣，我們先找到地圖部件包：
ThingsBoard提供的地圖控件比較豐富，我們先選個鵝廠的騰訊地圖：
選擇實體做數據源：
好了，看看圖？
修改Marker圖標
這個路燈幾乎看不見啊，親先別差評，看我來改一改，加上個Marker圖標：
現在看一看，
不好看沒關系，我們可以換自己的圖：
找圖標，認准 iconfont 阿里巴巴矢量圖標庫
修改彈框
既然有了Marker，少不得要點一下，等等這個是啥？
進入修改模式，看看設置，
發現代碼
<div style='font-size: 13px;'>
<b>${entityName}</b><br /><br />
<b>Latitude:</b> ${latitude:7}<br />
<b>Longitude:</b> ${longitude:7}<br />
<b>Temperature:</b> ${temperature} °C<br />
<small>See advanced settings for details</small>
</div>
原來是默認設置，修改成：
<div style='font-size: 13px;'>
<b>${entityName}</b><br />
<b>緯度:</b> ${latitude:7}<br />
<b>經度:</b> ${longitude:7}<br />
<b>電量:</b> ${battery} %<br />
</div>
如果樣式還不符合你的審美，請Web前端修改就好。
只要前端用html/css/js可以實現的，在這里都可以通過自定義的方式做到，發揮想象力~
詳情頁當然不止這些內容，這里建議大家好好學習一下部件庫，相信你很快就會有適合自己項目的炫酷詳情頁~
三、下一步
大家應該發現這個問題了：
一個設備我寫一個詳情頁，10個設備寫10個？這個不能通用么？
當然不是這樣，ThingsBoard的操作太魔幻，下節課我們就直接放個大招解決這個問題~