vue 项目中使用百度地图问题？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› Vue.js

这是一个创建于 1315 天前的主题，其中的信息可能已经有所发展或是发生改变。

最近项目中使用百度地图，根据后台推过来的点坐标 list，在百度地图上生成路线，现在后台返回 1W 多条数据，前台页面就直接卡死了。用的是别人封装好的 vue-baidu-map ,请教一下有没有什么好的实现方法？或者 vue 项目中应该怎样正确的使用百度地图？

百度

Vue

地图

后台

16 条回复 • 2021-04-20 20:32:26 +08:00

KouShuiYu

2021-04-19 13:14:14 +08:00

不需要监听数据掉不要放在 data 中，放在外面试试，如果还不行就分批渲染

woduzibue

2021-04-19 13:22:46 +08:00

@KouShuiYu 不放在 data 中，放在外面是指放在哪里？

ryncv

2021-04-19 13:56:11 +08:00

@woduzibue 不要在 data 中提前声明，否则会被添加响应式。需要的时候直接 this.list = xx 。或者使用 Object.freeze

woduzibue

2021-04-19 14:44:39 +08:00

@ryncv 我刚才也用了 Object.freeze，请求用了 1.4min 最后回来还是没反应

this.loading = true
this.axios
.post(
'/api/tms/goodsMonitor/getWaybillOfDeviceInfo',
{
waybillNo: values.waybillNo
},
{ timeout: 200000 }
)
.then(response => {
this.loading = false
if (response) {
this.map.path = Object.freeze(response.gpsInfoList)
this.map.markers = Object.freeze(response.weightMonitorWorkList)
this.map.center = {
lng: this.map.path[this.map.path.length - 1].lng,
lat: this.map.path[this.map.path.length - 1].lat
}
this.map.car = {
lng: this.map.path[0].lng,
lat: this.map.path[0].lat
}
this.map.car = JSON.parse(JSON.stringify(this.map.center))
this.loading = false
}
})
.catch(() => {
this.loading = false
})
.finally(() => {
this.loading = false
})

woduzibue

2021-04-19 15:19:32 +08:00

@KouShuiYu
@ryncv 谢谢两位大佬， Object.freeze 使用后路线出来了，刚才没出来是后台返回的异常点太多( bm-marker) 估计是需要渲染的 bm-marker 太多导出画面卡死了。
谢谢谢谢