获取特勤线路详细信息失败
TypeError: _this
6.$refs
.mineMapRef
.updateRealtimeRoute is not a function
at _callee3$
(index
.vue?
./node_modules/babel-loader/lib/index
.js!
./node_modules/
vue-loader/lib/index
.js??
vue-loader-options
:701
:39
)
at tryCatch
(regeneratorRuntime
.js:72
:1
6)
at Generator
.eval
(regeneratorRuntime
.js:1
61
:17
)
at Generator
.eval [as next]
(regeneratorRuntime
.js:102
:21
)
at asyncGeneratorStep
(asyncToGenerator
.js:9
:24
)
at _next
(asyncToGenerator
.js:28
:9
)deviceArray
: [__ob__
: Observer]
vue.js:4857 [
Vue warn]
: Error in v-on handler
: "
TypeError: Cannot read properties of undefined (reading 'realtime'
)"
found in
---> <SpeLineList> at src/views/components/SpeLineDetail/index
.vue
<Index> at src/views/largeScreen/SpecialLine/index
.vue
<App> at src/views/App
.vue
<Root>
warn$2 @
vue.js:4857
logError @
vue.js:3547
globalHandleError @
vue.js:3543
handleError @
vue.js:3511
invokeWithErrorHandling @
vue.js:3527
invoker @
vue.js:14
61
invokeWithErrorHandling @
vue.js:3519
Vue.$emit @
vue.js:2
638
_callee2$ @ index
.vue?
./node_modules/babel-loader/lib/index
.js!
./node_modules/
vue-loader/lib/index
.js??
vue-loader-options
:3
60
tryCatch @ regeneratorRuntime
.js:72
eval @ regeneratorRuntime
.js:1
61
eval @ regeneratorRuntime
.js:102
asyncGeneratorStep @ asyncToGenerator
.js:9
_next @ asyncToGenerator
.js:28
Promise
.then
asyncGeneratorStep @ asyncToGenerator
.js:18
_next @ asyncToGenerator
.js:28
eval @ asyncToGenerator
.js:33
Wrapper @ export
.js:20
eval @ asyncToGenerator
.js:25
submitForm @ index
.vue?
./node_modules/babel-loader/lib/index
.js!
./node_modules/
vue-loader/lib/index
.js??
vue-loader-options
:373
invokeWithErrorHandling @
vue.js:3519
invoker @
vue.js:14
61
original_1
._
wrapper @
vue.js:751
6
vue.js:3551
TypeError: Cannot read properties of undefined (reading 'realtime'
)
at
VueComponent
.updateVehiclePosition
(index
.vue?
./node_modules/babel-loader/lib/index
.js!
./node_modules/
vue-loader/lib/index
.js??
vue-loader-options
:475
:19
)
at
VueComponent
.handlesHeadTq
(index
.vue?
./node_modules/babel-loader/lib/index
.js!
./node_modules/
vue-loader/lib/index
.js??
vue-loader-options
:677
:29
)
at
VueComponent
.handlestartTq
(index
.vue?
./node_modules/babel-loader/lib/index
.js!
./node_modules/
vue-loader/lib/index
.js??
vue-loader-options
:668
:12
)
at invokeWithErrorHandling
(vue.js:3519
:28
)
at
VueComponent
.invoker
(vue.js:14
61
:1
6)
at invokeWithErrorHandling
(vue.js:3519
:28
)
at
Vue.$emit
(vue.js:2
638
:11
)
at _callee2$
(index
.vue?
./node_modules/babel-loader/lib/index
.js!
./node_modules/
vue-loader/lib/index
.js??
vue-loader-options
:3
60
:24
)
at tryCatch
(regeneratorRuntime
.js:72
:1
6)
at Generator
.eval
(regeneratorRuntime
.js:1
61
:17
) 地图组件，父组件 // 特勤路线演习
handlestartTq
(type
) {
this
.deviceArray = []
console
.log
(this
.deviceArray, 'aaaaaaaaaaaa'
);
console
.log
("type
:", type, "deviceArray
:", this
.deviceArray
);
this
.isStartTq=type
this
.handlesHeadTq
()
},
// 特勤路线演习-头车
handlesHeadTq
() {
console
.log
("deviceArray
:", this
.deviceArray
);
const dataPoints = this
.deviceArray
.map
(item =>
([
Number
(item
.longitude
),
Number
(item
.latitude
)
]
));
this
.$refs
.mineMapRef
.updateVehiclePosition
(dataPoints[dataPoints
.length - 1]
)
},
/**
* @description
:特勤线路详细信息
* @return {*}
*/
async handleTaskInfo
(row
) {
try {
const params = {
id
: row
.id,
};
const res = await getTqInfoApiBusiness
(params
);
const dataPoints = res
.data
.xlData
.map
(item =>
([
Number
(item
.longitude
),
Number
(item
.latitude
)
]
));
this
.$refs
.mineMapRef
.updateRealtimeRoute
(dataPoints
);
this
.$refs
.mineMapRef
.addRouteMarker
(dataPoints[0], "end"
);
this
.$refs
.mineMapRef
.addRouteMarker
(dataPoints[dataPoints
.length - 1], "start"
);
console
.log
(dataPoints, '获取特勤线路详细信息成功'
);
} catch
(error
) {
console
.log
("获取特勤线路详细信息失败", error
);
}
} //初始化MQTT
initMQTT
() {
this
.deviceArray = []
//开始链接MQTT
const mqOptions = {
clientId
: new Date
().getTime
() + "", //客户端ID
username
: mqttUserName, //用户名
password
: mqttUserPassword, //密码
keepalive
: 30, //心跳时间
protocol
: 'ws', //协议类型
reconnectPeriod
: 30 * 1000, //两次重连间隔
connectTimeout
: 40000, //重连超时时间
clean
: true //设置为false，在离线时接收QoS 1和QoS 2消息
};
this
.mqttClient = mqtt
.connect
(mqttAddress, mqOptions
);
// mqtt连接
this
.mqttClient
.on
("connect",
(e
) => {
this
.mqttClient
.subscribe
('fusion-tqxl-gps', { qos
: 0 },
(error
) => {
if
(!error
) {
console
.log
('特勤路线【车载】订阅成功'
)
} else {
console
.log
('特勤路线【车载】订阅失败'
)
}
}
)
}
);
// 接收消息处理
this
.mqttClient
.on
("message",
(topic, message
) => {
const res =
JSON
.parse
(message
.toString
());
// console
.log
("收到特勤路线【车载】00000", res
)
this
.deviceArray
.push
(res
)
console
.log
("收到特勤路线【车载】", this
.deviceArray
)
}
);
// 断开发起重连
this
.mqttClient
.on
("reconnect",
(error
) => {
console
.log
("特勤路线【车载】
:", error
);
}
);
// 链接异常处理
this
.mqttClient
.on
("error",
(error
) => {
console
.log
("特勤路线【车载】
:", error
);
}
);
},, watch
: {
deviceArray
(newVal
) {
if
(newVal
.length > 0 && this
.isStartTq
) {
this
.handlesHeadTq
(newVal
)
}
},
},怎么修改报错，优化流程，在父组件获取到原路线先绘制 this
.$refs
.mineMapRef
.updateRealtimeRoute
(dataPoints
);
this
.$refs
.mineMapRef
.addRouteMarker
(dataPoints[0], "end"
);
this
.$refs
.mineMapRef
.addRouteMarker
(dataPoints[dataPoints
.length - 1], "start"
);，在点击开始演习获取车辆实时位置handlestartTq，然后绘制新路线黄色，覆盖在原路线上，并且按照最新点位更新车辆图标
博客指出报错原因是有方法调用，但未在methods中声明，在html里的调用情况也是如此，涉及JavaScript和Vue.js相关前端知识。
扫一扫
5314
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
