本文档为您介绍当单击轮播列表组件时，切换展示对应学校在地图上的位置信息和数据的方法。

背景信息

需要实现的交互：当单击用来展示学校排名的轮播列表组件内的某一行时，在地图组件上定位该学校位置，并通过散点层子组件返回该学校位置上的数据。

实现方案：轮播列表组件的数据中包含学校的位置数据。当单击轮播列表组件的某一行时，获取该行的位置数据，基础平面地图父组件对应更新数据修改经纬度，散点层返回对应的点位数据。

操作步骤

  1. 在节点编程配置页面，将左侧小学文件夹下的小学学校列表、初中下的初中学校列表、地图&固定内容下的基础平面地图和地图&固定内容 > 基础平面地图下的散点层四个组件节点拖至画布中。
  2. 按照以下说明连线。
    • 将初中学校列表的当点击单行时事件与散点层的导入数据接口连线。
    • 将小学学校列表的当点击单行时事件与基础平面地图的导入数据接口连线。
  3. 在上一步的两条连线中各添加一个转换器，并分别命名为提取散点数据和地图父组件定位缩放。
    具体操作方法请参见配置节点编程。
  4. 将初中学校列表和小学学校列表的当点击单行时事件分别与提取散点数据和地图父组件定位缩放转换器连线。
    连线完成后，效果如下图所示。
    定位地图样式连线
  5. 配置转换器。
    1. 右键单击名称为提取散点数据的转换器，选择编辑。
    2. 在转换器设置对话框的转换器脚本编辑区域输入转换条件，完成后单击保存。
      提取散点数据转换器代码
      转换器的示例代码如下。 
      return [
  {
    "id": 1,
    "name": data.name,
    "address": data.address,
    "lat": data.lat,
    "lng": data.lng,
    "type": "ok",
  }
];
      说明 由于轮播列表组件中的数据中包含了所有的地理信息，所以当前转换器需要提取的数据都可以直接从上游的轮播列表组件抛出的数据中获取。
    3. 使用同样的方式配置地图父组件定位缩放转换器。
      地图父组件定位缩放转换器代码
      转换器的示例代码如下。 
      return [{
  "lng": data.lng,
  "lat": data.lat,
  "zoom": 13
}];