开发一个地图dashboard
5133 打赏
不完整教程 2022-05-30 15:26:15

上面的二篇文件我们介绍了如果在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>

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

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

声明:本文内容由易百纳平台入驻作者撰写,文章观点仅代表作者本人,不代表易百纳立场。如有内容侵权或者其他问题,请联系本站进行删除。
评论
0个
时间排序
内容存在敏感词
    0 条记录 第 0 /
    相关专栏
    打赏作者
    易百纳技术社区
    不完整教程
    您的支持将鼓励我继续创作!
    打赏金额:
    ¥1 易百纳技术社区
    ¥5 易百纳技术社区
    ¥10 易百纳技术社区
    ¥50 易百纳技术社区
    ¥100 易百纳技术社区
    支付方式:
    微信支付
    支付宝支付
    易百纳技术社区 微信支付
    易百纳技术社区
    打赏成功!

    感谢您的打赏,如若您也想被打赏,可前往 发表专栏 哦~

    举报反馈

    举报类型

    • 内容涉黄/赌/毒
    • 内容侵权/抄袭
    • 政治相关
    • 涉嫌广告
    • 侮辱谩骂
    • 其他

    详细说明

    审核成功

    发布时间设置
    发布时间:
    是否关联周任务-专栏模块

    审核失败

    失败原因
    备注
    Loading...
    易百纳技术社区
    确定要删除此文章、专栏、评论吗?
    确定
    取消
    易百纳技术社区
    活动规则
    • 1.周任务为周期性任务,每周周一00:00刷新,上周完成的任务不会累计到本周,本周需要从头开始任务,当前任务完成后才可以完成下一个任务
    • 2.发布在平台的专栏需为原创技术专栏,且社区作为首次发布的平台,在其他平台发布需注明为转载
    • 3.周任务中的专栏需要达到一定质量才会被计入完成总数中。具体以平台审核为准,如有疑问,可联系社区客服(ebainacs)。
    • 4.专栏/资料的任务以审核通过的篇数为准,每个任务数量不做累计。
    • 5.任务完成后,现金奖励直接打款到微信账户EBC/收益将自动发放到个人账户,可前往“我的钱包”查看;其他奖励请联系客服兑换。
    易百纳技术社区
    升级提醒
    升级

    恭喜您的社区称号由 升级为 “社区游民”

    同时为了感谢您对社区的支持,我们将送出xxx礼品一份, 记得领取哦~

    升级提醒
    易百纳技术社区