首页专栏详情
打赏
开发一个地图dashboard
易百纳技术社区 ember 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>

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

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

772
收藏
点赞
打赏
共1人已赏
ember
评论
0个
内容存在敏感词
相关专栏
打赏作者
易百纳技术社区
ember
您的支持将鼓励我继续创作!
打赏金额:
¥1 易百纳技术社区
¥5 易百纳技术社区
¥10 易百纳技术社区
¥50 易百纳技术社区
¥100 易百纳技术社区
支付方式:
微信支付
支付宝支付
易百纳技术社区 微信支付
易百纳技术社区
打赏成功!

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

审核成功

发布时间设置
发布时间:

审核失败

失败原因
备注
Loading...
易百纳技术社区
确定要删除此文章、专栏、评论吗?
确定
取消
易百纳技术社区
易百纳技术社区
在专栏模块发布专栏,可获得其他E友的打赏
易百纳技术社区
回答悬赏问答,被题主采纳后即可获得悬赏金
易百纳技术社区
在上传资料时,有价值的资料可设置为付费资源
易百纳技术社区
达到一定金额,收益即可提现~
收益也可用来充值ebc,下载资料、兑换礼品更容易
易百纳技术社区
活动规则
  • 1.周任务为周期性任务,每周周一00:00刷新,上周完成的任务不会累计到本周,本周需要从头开始任务,当前任务完成后才可以完成下一个任务
  • 2.发布的专栏与资料需要与平台的板块有相关性,禁止注水,专栏/资料任务以审核通过的篇数为准
  • 3.任务完成后,现金奖励直接打款到微信账户;EBC/收益将自动发放到个人账户,可前往“我的钱包”查看;其他奖励请联系客服兑换
  • 4.每周最后三个任务将会有以下奖品掉落:社区热卖开发板、小米音响、视频年度会员、京东卡、华为手机等等
易百纳技术社区