WLDZR 2023-03-25 17:40 采纳率: 100%
浏览 38
已结题

vue根据后端数据动态修改界面组件属性的问题

最近在用Vue-element-admin调用百度地图,创建了许多线性覆盖物:

<script>
import speedApi from '@/api/speedsearch'
export default {
  name: 'BmapDemo',
  data() {
    return {
      options: [{
        value: '15',
        label: '15分后'
      }, {
        value: '30',
        label: '30分后'
      }, {
        value: '45',
        label: '45分后'
      }, {
        value: '60',
        label: '60分后'
      }],
      value: '',
      speedlist: {
        id: '',
        fif: '',
        thir: '',
        fou: '',
        six: ''
      }
    }
  },
  mounted() {
    // 2. 创建地图示例
    var map = new window.BMapGL.Map('container')
    // 3. 设置中心点坐标
    var point = new window.BMapGL.Point(116.400747, 39.983412)
    // 4. 地图初始化,同时设置地图展示级别
    map.centerAndZoom(point, 15)
    // 5. 开启鼠标滚轮缩放
    map.enableScrollWheelZoom(true)
    var scaleCtrl = new window.BMapGL.ScaleControl() // 添加比例尺控件
    map.addControl(scaleCtrl)
    var zoomCtrl = new window.BMapGL.ZoomControl() // 添加缩放控件
    map.addControl(zoomCtrl)
    var cityCtrl = new window.BMapGL.CityListControl() // 添加城市列表控件
    map.addControl(cityCtrl)
    map.addEventListener('click', (data) => {
      // point包含了经纬度
      console.log(data.point)
      // polyline17.setStrokeColor('green')
    })
    var polyline1 = new window.BMapGL.Polyline([
      new window.BMapGL.Point(116.360431, 39.992534),
      new window.BMapGL.Point(116.360899, 39.987103)
    ],
    { strokeColor: 'blue', strokeWeight: 6, strokeOpacity: 0.5 }
    )
    map.addOverlay(polyline1)
    var polyline2 = new window.BMapGL.Polyline([
      new window.BMapGL.Point(116.360899, 39.987103),
      new window.BMapGL.Point(116.360827, 39.982182)
    ],
    { strokeColor: 'blue', strokeWeight: 6, strokeOpacity: 0.5 }
    )
    map.addOverlay(polyline2)
    var polyline3 = new window.BMapGL.Polyline([
      new window.BMapGL.Point(116.360827, 39.982182),
      new window.BMapGL.Point(116.361438, 39.973778)
    ],
    { strokeColor: 'blue', strokeWeight: 6, strokeOpacity: 0.5 }
    )
    map.addOverlay(polyline3)
    var polyline17 = new window.BMapGL.Polyline([
      new window.BMapGL.Point(116.387632, 39.983316),
      new window.BMapGL.Point(116.38677, 39.974525)
    ],
    { strokeColor: 'blue', strokeWeight: 6, strokeOpacity: 0.5 }
    )
    map.addOverlay(polyline17)
    var polyline16 = new window.BMapGL.Polyline([
      new window.BMapGL.Point(116.386626, 39.988457),
      new window.BMapGL.Point(116.387632, 39.983316)
    ],
    { strokeColor: 'blue', strokeWeight: 6, strokeOpacity: 0.5 }
    )
    map.addOverlay(polyline16)
  },
  methods: {
    changecolor(id, speed) {
      if (speed >= 5) {
        window['polyline' + id].setStrokeColor('green')
      } else if (speed >= 2 && speed < 5) {
        window['polyline' + id].setStrokeColor('yellow')
      } else {
        window['polyline' + id].setStrokeColor('red')
      }
    },
    paintmap() {
      speedApi.paintmap(this.value).then(response => {
        this.speedlist = response.data.row
        console.log(this.speedlist)
        for (var i = 0; i < this.speedlist.length; i++) {
          if (this.speedlist[i].fif != null) {
            window.console.log(this.speedlist[i].id)
            window.console.log(this.speedlist[i].fif)
            this.changecolor(this.speedlist[i].id, this.speedlist[i].fif)
          } else if (this.speedlist[i].thir != null) {
            window.console.log(this.speedlist[i].id)
            window.console.log(this.speedlist[i].thir)
            this.changecolor(this.speedlist[i].id, this.speedlist[i].thir)
          } else if (this.speedlist[i].fou != null) {
            window.console.log(this.speedlist[i].id)
            window.console.log(this.speedlist[i].fou)
            this.changecolor(this.speedlist[i].id, this.speedlist[i].fou)
          } else {
            window.console.log(this.speedlist[i].id)
            window.console.log(this.speedlist[i].six)
            this.changecolor(this.speedlist[i].id, this.speedlist[i].six)
          }
        }
      })
    }
  }
}
</script>

我的method里的changecolor是用来根据后端传回的ID和速度修改前端对应线性覆盖物的颜色的,但是运行一直报错,想请教下该怎么修改这个方法。

img


这个是报错的内容

  • 写回答

1条回答 默认 最新

  • juechen333 后端领域优质创作者 2023-03-25 19:03
    关注

    在 changecolor 方法中的 setStrokeColor 方法调用失败,可能是由于前端未正确获取到线性覆盖物对象或未正确设置线性覆盖物的属性。
    可以在方法调用之前使用 console.log 或者 Vue.js 的开发工具来打印相关对象,以确保正确获取到了对应的对象,可以在 changecolor 方法中添加一些调试信息或者直接在浏览器的开发者工具中调试代码,以确保 setStrokeColor 方法可以被正确调用

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 4月3日
  • 已采纳回答 3月26日
  • 创建了问题 3月25日

悬赏问题

  • ¥30 微信小程序请求失败,网页能正常带锁访问
  • ¥15 对语音信号进行变调时,间接改变时序从而实现语音变速,进而将变调与变速同时实现、参数合成法换为波形合成法
  • ¥15 Python实现hog特征图可视化
  • ¥30 德飞莱51单片机实现C4炸弹
  • ¥50 CrossLink-LIF-MD6000 型 FPGA 的 CMOS 转 MIPI D-PHY IP 核功能使用异常
  • ¥15 proteus控制16x16LED点阵显示屏的设计
  • ¥30 求会做山景bp1048b2程序的。做直播声卡用
  • ¥15 求数学建模论文问题指导
  • ¥15 51单片机与数码管实现电子琴
  • ¥15 h3.6m 人类行为预测论文复现