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

[woduzibue]

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

[KouShuiYu]

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

[woduzibue]

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

[ryncv]

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

[woduzibue]

@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]

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

[ciddechan]

bd 文档有大量点渲染方法

[AkideLiu]

借楼问一下，最近在用 Google map vue，github 上大多数 lib 都是半死不活的。难道是 vue 不需要实现 map 这类的功能吗？还是大佬们都是自己封装

[NPC666]

@AkideLiu gmap-vue

[AkideLiu]

@NPC666 对现在用的就是这个，感觉活跃度很低，而且 upstream 多次断更

[zzw1998]

@AkideLiu 我用的是 vue2-google-maps

[OHyn]

Vue2.x 遇到性能问题的，基本山都是往 data 里塞了无需和 view 绑定的数据。
当年我把高德地图的实例塞进去了。。。😂
还有一个事，就是尽量不要用 vue-baidu-map 这种封装好的二传手，否则遇到 bug 会很痛苦。

[uselessVisitor]

不要把点都放在 data 里。。

[woduzibue]

@OHyn 我找了几个教程说是用 vue-baidu-map 方便点。之前也没用过地图，后面有时间再研究研究，时间紧任务重，bug 就留给后面改的人吧 hhhh

@beichenhpy 又学到了，这是学到老，活到老

@ciddechan 可以可以 ，我再找找看，谢谢谢谢

[t2doo]

前几年用百度地图写过, 纯 JS 的,没地用 Vue.当要显示的点位上了 5000 以上, 就很卡, 直接卡崩.后来用了 echarts 上面的百度地图包,1W+都不卡,秒开.

[woduzibue]

@t2doo echarts 也没用过，又多一种思路，谢谢

[OHyn]

@t2doo echart 是纯 canvas 方案，点再多也不怕，近年来各大地图页加入了相关 api 。基于 dom 的方案确实不适合大数据量的情况。