input输入改变-地图显示改变

结果展示：

描述：地图信息与子组件dialog信息联动显示

---

界面部分代码：

<el-row  v-for="(item, index) in airwaylist.pointList" :key="index" >
          <el-col :span="6" class="posstyle" >
            <el-form-item >
              <template>
              <el-select v-model="selectArr[index]" filterable placeholder="坐标"  @change="changePoint($event,index)">
              <el-option  v-for="item in pointsData2" :key="item.id" :label="item.name" :value="item.name"></el-option>
              </el-select></template>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="经度" label-width="45px">
              <el-input
              v-model="item.latlon[0]"
              autocomplete="off"
              @change="changePos"
            ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="纬度" label-width="45px">
              <el-input
              v-model="item.latlon[1]"
              autocomplete="off"
              @change="changePos"
            ></el-input>
            </el-form-item>
          </el-col>
          <el-col style="width:10px;margin-top:8px">
            <i @click="del(index)" class="el-icon-delete"></i>
          </el-col>
        </el-row>

分析：
v-for循环航线中航路点 airwaylist.pointList
划分为三列分别为：坐标名称、经度、纬度
v-model绑定，监听用户input事件来更新数据
经纬度改变时触发函数@change=“changePos”
下面是JS部分的函数代码：

changePos(){
      //在原来图层上找到原有的点，重新赋值新位置，赋值新标注
      let _this=this
      let list2 =[];
      let n = this.airwaylist.pointList.length
      //由于双向绑定，input变化将导致this.airwaylist.pointList中数据变化
      for(let i=0;i<n;i++){
        let list3=[]
        list3.push(+this.airwaylist.pointList[i].latlon[0])
        list3.push(+this.airwaylist.pointList[i].latlon[1])
        //前面加+为将字符串转化为数字形式
        list2.push(list3)
        //list2为只存储经纬度的二维数组
        this.drawshow(list2)
        //写一个drawshow()函数将改变后的画出来
    },

学习内容：

提示：这里可以添加要学的内容

1、v-model双向绑定
2、划分页面显示
3、改变后触发@change=“changePos”