技術標籤：github 地圖上畫區域的工程leaflet 百度地圖vue 高德地圖api多個點標記百度地圖 key高德地圖示記怎麼弄

我們知道 HA 預設的地圖面板使用的是 OpenStreet 地圖，社群內大部分的元件也是基於 Google Map 開發優化的。這可苦了我們牆內的小夥伴，必須全部替換掉。至於替換後所考慮使用的國內地圖服務商，我這裡還是推薦『高德』。眾所周知，由於特別的保密政策及『地圖法』，我國的地圖座標系都是加密後的資料，在這種情況下，大家常用的百度地圖使用的是百度特有的 BA09 座標系，在我們實際接入中會產生較大的地圖偏移，所以棄用之。那剩下的就只有高德、騰訊這麼 2 個選擇了，摸摸良心也知道選高德是沒錯的。

在 HA 上顯示地圖，一種方法呢是通過 Panel 面板，另外一種是通過 Card 卡片，兩種方法我一併介紹。

面板

使用面板將『高德地圖』接入 HA，一種方法是直接替換掉原有地圖面板的底層地圖，另一種方法是接入自定義面板。前者需要在 HA 每次更新後替換原始檔，後者則要忍受左側欄有 2 個地圖面板入口，可以說都不是那麼完美。權衡再三我還是選擇直接替換原始檔，畢竟 HA 更新沒有那麼的頻繁。

開啟預設的『Map』頁面，我們不難從右下角標註部分發現其使用的是『leaflet』框架，有關該框架的具體介紹我就不展開了。簡單來說，它的執行原理就是提供一張底圖圖層，之後在上面增加標記圖層。因此，我們只需要把底圖替換為『高德地圖』就 OK 了。

注意：該步操作涉及原始檔修改，有一定風險，請謹慎操作，我不承擔任何責任。

首先，開啟『地圖』頁面的原始檔，如果你是通過虛擬環境安裝 HA 的，並且使用 ES6 版前端，那麼原始檔路徑在:

/srv/homeassistant/homeassistant_venv/lib/python3.5/site-packages/hass_frontend/panels

如果保持使用 ES5 版前端，那麼原始檔路徑在:

/srv/homeassistant/homeassistant_venv/lib/python3.5/site-packages/hass_frontend_es5/panels

先使用格式化工具進行格式化，找到圖層相關的語句：

attached: function() {

var t = this._map = window.L.map(this.$.map);

t.setView([51.505, -.09], 13),

window.L.tileLayer("https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png").addTo(t),

this.drawEntities(this.hass),

this.async(function() {

t.invalidateSize(),

this.fitMap()

}.bind(this), 1)

},

將window.L.tileLayer中圖層路徑部分https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png替換為高德地圖 URL，之後儲存檔案；

接著，在終端內使用gzip指令壓縮html檔案，替換源html與html.gz檔案；

再次，使用md5指令獲取html檔案的 md5 值，開啟上上級資料夾內的__init__.py檔案，替換"map"的值；

最後，大功告成，重啟 HA 即可，你可以看到『Map』頁面的地圖已經變為了高德地圖。

最後的最後，我知道你們很懶又迷茫，給你們提供了現成的檔案，直接進行替換即可。檔案地址在：https://github.com/cxlwill/HA_GaodeMap

卡片

使用卡片將『高德地圖』接入 HA，我們這裡需要利用『Genric』這個元件，將地圖轉化為攝像頭畫面。

首先，申請高德開發者賬戶，新建應用，獲取 API 介面祕鑰『key』。

接著，仔細閱讀該份靜態地圖技術文件，瞭解各項值代表的意義和表示方法。

最後，開啟configuration.yaml新增Generic元件：

#高德地圖

camera:

name: Home

platform: generic

still_image_url: http://restapi.amap.com/v3/staticmap?location=地圖中心經度,地圖中心緯度&zoom=14&scale=2&size=305*185&traffic=1&&labels=家,0,0,35,0xFFFFFF,0x5288d8:標記經度,標記緯度&key=祕鑰

limit_refetch_to_url_change: false

重啟 HA 後，你想要顯示的地圖區域就會以『卡片』的形式展現在前端中了。

配置示例：https://github.com/cxlwill/HA_config

關注一下，更多精彩，不容錯過！

???