Home Assistant 就目前来说，本地化的工作很不到位。我也将在之后的教程中专门出一篇有关汉化的内容，敬请期待。

这一次的教程呢就先聚焦一下『地图』吧。我们知道 HA 默认的地图面板使用的是 OpenStreet 地图，社区内大部分的组件也是基于 Google Map 开发优化的。这可苦了我们国内的小伙伴，必须全部替换掉。

至于替换后所考虑使用的国内地图服务商，我这里还是推荐『高德』。众所周知，由于特别的保密政策及『地图法』，我国的地图坐标系都是加密后的数据，在这种情况下，大家常用的百度地图使用的是百度特有的 BA09 坐标系，在我们实际接入中会产生较大的地图偏移，所以弃用之。那剩下的就只有高德、腾讯这么 2 个选择了，我选择前者。

在 HA 上显示地图，一种方法呢是通过 Panel 面板，另外一种是通过 Card 卡片，两种方法我一并介绍。

面板

使用面板将『高德地图』接入 HA，一种方法是直接替换掉原有地图面板的底层地图，另一种方法是接入自定义面板。前者需要在 HA 每次更新后替换源文件，后者则要忍受左侧栏有 2 个地图面板入口，可以说都不是那么完美。权衡再三我还是选择直接替换源文件，毕竟 HA 更新没有那么的频繁。

打开默认的『Map』页面，我们不难从右下角标注部分发现其使用的是『Leaflet』框架，有关该框架的具体介绍我就不展开了。简单来说，它的运行原理就是提供一张底图图层，之后在上面增加标记图层。因此，我们只需要把底图替换为『高德地图』就 OK 了。

注意：该步操作涉及源文件修改，有一定风险，请谨慎操作，我不承担任何责任。

首先，打开『地图』页面的源文件，如果你是通过虚拟环境安装 HA 的，那么源文件路径在:

/srv/homeassistant/homeassistant_venv/lib/python3.4/site-packages/homeassistant/components/frontend/www_static/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 替换为高德地图 http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}，之后保存文件；

接着，在终端内使用 gzip 指令压缩 html 文件，替换源 html 与 html.gz 文件；

再次，使用 md5 指令获取 html 文件的 md5 值，打开上上级文件夹内的 version.py 文件，替换 "panels/ha-panel-map.html"的值；

最后，大功告成，重启 HA 即可，你可以看到『Map』页面的地图已经变为了高德地图。

最后的最后，我知道你们很懒又迷茫，给你们提供了现成的文件，直接进行替换即可，可点此前往。

卡片

使用卡片将『高德地图』接入 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 后，你想要显示的地图区域就会以『卡片』的形式展现在前端中了。

我知道你们还是又懒又迷茫，因此，提供了 示例配置，这也是我的所有配置的同步仓库。

到这里，相信大家可以自如地在 HA 中使用高德地图了，配合 device_tracker 组件，能更好地掌握接入设备的地理位置信息。

作者的话

距离我发布本系列首篇文章至今已经快半年了，系列至今已有 10 篇教程。无独有偶，JailbreakHum在 《少数派季度作者颁奖礼开场发言》所阐述的『内容调整』的观点恰恰与我的初衷十分契合。可以说从一开始，我就在整个系列中尽量保证内容的入门性，也在现实中帮助了很多派友成功搭建系统。

在和派友的互动中我意识到碍于英文水平的局限，很多人无法进一步地享受 Home Assistant 带来的便利。鉴于此，我个人独立制作了一份更接地气的 中文文档 ，目前仍处于雏形阶段，还在快马加鞭中，希望可以帮助到更多的人，欢迎大家阅读+收藏。

良好的体验需要良性的互动维持，为了保持版面的整洁，请大家不要在系列所有文章下方评论区 PO 整段的错误代码。遇到问题请至『维护答疑篇』集中评论。