地图

步骤一：添加组件

1. 创建Web应用。具体操作，请参见创建Web应用。

2. 在Web应用编辑器中，单击最左侧的组件图标。

3. 在画布左侧组件列表上方，输入地图，找到该组件，然后将组件拖拽到中间画布。

   有关组件添加的更多信息，请参见添加组件。

   在左侧组件面板中搜索并选择地图组件，将其拖入画布。添加后，画布中提示"请在右侧面板配置地图场景"，需在右侧属性面板单击选择场景完成配置。右侧面板底部显示警告"地图组件已过时"，建议使用新版设备地图组件。

步骤二：配置数据源

1. 单击右侧样式栏的选择场景，选择已有场景，或进入空间数据可视化控制台创建场景后，返回当前页面，选择新建的场景，单击确定。
   创建场景具体操作说明，请参见物联网平台设备展示。
2. 可选：根据配置项说明修改地图。

   配置项	描述
   场景名称	空间可视化中的场景名。在右侧样式配置面板地图概览右上方显示。
   刷新	单击后会从空间可视化同步预览图，并刷新地图组件。
   编辑场景	跳转到空间可视化编辑页面，重新编辑对应场景。 有关配置场景的详细内容请参见物联网平台设备展示。
   更换场景	重新选择或者新建一个可视化场景。

步骤三：配置样式

调整组件在页面中的最终位置。有关组件通用样式配置，请参见样式配置。

步骤四：配置交互动作

1. 在Web应用编辑器中，选中目标组件的交互页签，配置事件和交互动作。详细配置指导请参见交互配置。
   地图组件的交互事件有两种：

   • 点击设备属性URL：单击地图上的设备属性URL触发交互动作。如果要使用该事件功能，需在该地图场景对应的目标产品的产品详情页，进行如下配置：
     • 添加一个产品标签studioType：url。
     • 在产品的功能定义中，增加一个属性，标识符为WEB_URL，用于填写设备外联页面（如设备详情页、视频设备播放页等）的URL。设备上线后，上报WEB_URL字段内容，如https://www.taobao.com。
   • 点击设备气泡：单击地图上表示设备的气泡触发交互动作。

2. 单击页面右上方的预览，预览和调试组件展示的数据和样式。