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

背景信息

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

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

操作步骤

  1. 在画布编辑器图层栏内，选中左侧小学文件夹下的小学学校列表、初中下的初中学校列表、地图&固定内容下的基础平面地图和地图&固定内容 > 基础平面地图下的散点层四个组件，右键单击选择导出到蓝图编辑器。
  2. 在画布编辑器页面左上角，单击蓝图编辑器图标（蓝图编辑器图标），切换到蓝图编辑器配置页面。
  3. 在蓝图编辑器页面，将左侧小学文件夹下的小学学校列表、初中下的初中学校列表、地图&固定内容下的基础平面地图和地图&固定内容 > 基础平面地图下的散点层四个组件节点拖至画布中。
  4. 按照以下说明连线。
    • 将初中学校列表的当点击单行时事件与散点层的导入数据接口连线。
    • 将小学学校列表的当点击单行时事件与基础平面地图的导入数据接口连线。
  5. 连线完成后，每条连线中间会自动添加一个串行数据处理节点，将节点分别命名为提取散点数据和地图父组件定位缩放。
    具体操作方法请参见什么是蓝图编辑器。
  6. 将初中学校列表和小学学校列表的当点击单行时事件分别与提取散点数据和地图父组件定位缩放的串行数据处理节点连线。
    连线完成后，效果如下图所示。定位地图样式连线
  7. 配置串行数据处理节点。
    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
}];