开发一个地图dashboard_专栏

上面的二篇文件我们介绍了如果在node-red中使用echarts，并制作了很多漂亮的直线图，其实这只是很小的一部分，更多的echarts图表可以去官方找一找。这两天有朋友问我，如何在node-red中集成高德地图，他要在node-red中使用高德地图的api来实现一个dashboard。

经过两天时间的业余研究，终于给他做了一个demo版本的案例。下面来分享一下这个思路

准备环境

要使用高德地图的sdk，首先要注册成为高德地图的开发者，有了账号后，需要实名制，否则有些权限收限制。

接着去控制台，找到应用管理，创建一个应用，并在应用下创建一个key
如下图

在创建key时要选择web端 js api

拿到了key之后，我们就可以调用高德地图的api了。

在html页面里一般的sdk引入方式是这样。
<script src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值"></script>

山重水复疑无路

我们先在node-red中这样试一下，
创建一个template节点，
编写其中的代码。

<div style="height:800px;width:800px" id="container"></div>
<!-- 加载地图JSAPI脚本 -->
 <script src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值"></script>
<script>
    var map = new AMap.Map('container', {
        viewMode: '2D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D',
        zoom:11, //初始化地图层级
        center: [116.397428, 39.90923] //初始化地图中心点
    });
</script>

部署后，发现页面报错，打开控制台，显示如下

Uncaught ReferenceError: AMap is not defined
AMap 没有定义

这是因为我们在template中引入js 和编写js，是按照先后顺序进行的，但在经过node-red，编译，处理后，真正在页面上，却是先执行开发者编写的script的内容，然后再引入外部js。这就导致没有找到AMap对象。

我们知道高德地图的SDK是没有离线版本的，你不能把高德地图的sdk js 下载到本地，然后在template中引入一个相对路径。该怎么办那？

柳暗花明又一村

仔细查阅高德地图的SDK，你会发现虽然高德地图的SDK JS无法下载到本地，但我们可以使用高德地图的JSAPI 加载器 这是一个固定的JS文件。文件地址 https://www.npmjs.com/package/@amap/amap-jsapi-loader

那么接下来就比较简单了。
首先下载这个JSAPI 加载器的js文件到本地，并存放在 node-red 的static 目录里。

接着修改 template节点中的内容

<div style="height:800px;width:800px" id="container"></div>
<!-- 加载地图JSAPI脚本 -->
<script name="map-sdk" src="/amap-loader.js"></script>
<script>
   AMapLoader.load({ //首次调用 load
        key:'您申请的key值',//首次load key为必填
        version:'2.0',
        plugins:['AMap.Scale','AMap.ToolBar']
    }).then((AMap)=>{
        map = new AMap.Map('container');
        map.addControl(new AMap.Scale())
        map.addControl(new AMap.ToolBar())
        map.add(new AMap.Marker({
            position:map.getCenter()
        }));
    }).catch((e)=>{
        console.error(e);
    });

    AMapLoader.load({ //可多次调用load
        plugins:['AMap.MapType']
    }).then((AMap)=>{
        map.addControl(new AMap.MapType())
    }).catch((e)=>{
        console.error(e);
    });

</script>

部署后，查看效果
不报错了，也正确出现了结果

谢谢观看。
更多案例，敬请关注。