V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
woduzibue
V2EX  ›  Vue.js

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

  •  
  •   woduzibue · 2021-04-19 11:48:33 +08:00 · 2462 次点击
    这是一个创建于 1312 天前的主题,其中的信息可能已经有所发展或是发生改变。
    最近项目中使用百度地图,根据后台推过来的点坐标 list,在百度地图上生成路线,现在后台返回 1W 多条数据,前台页面就直接卡死了。用的是别人封装好的 vue-baidu-map ,请教一下有没有什么好的实现方法?或者 vue 项目中应该怎样正确的使用百度地图 ?
    16 条回复    2021-04-20 20:32:26 +08:00
    KouShuiYu
        1
    KouShuiYu  
       2021-04-19 13:14:14 +08:00
    不需要监听数据掉不要放在 data 中,放在外面试试,如果还不行就分批渲染
    woduzibue
        2
    woduzibue  
    OP
       2021-04-19 13:22:46 +08:00
    @KouShuiYu 不放在 data 中,放在外面是指放在哪里?
    ryncv
        3
    ryncv  
       2021-04-19 13:56:11 +08:00   ❤️ 1
    @woduzibue 不要在 data 中提前声明,否则会被添加响应式。需要的时候直接 this.list = xx 。 或者使用 Object.freeze
    woduzibue
        4
    woduzibue  
    OP
       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
        5
    woduzibue  
    OP
       2021-04-19 15:19:32 +08:00
    @KouShuiYu
    @ryncv 谢谢两位大佬, Object.freeze 使用后 路线出来了 ,刚才没出来是后台返回的异常点太多( bm-marker) 估计是需要渲染的 bm-marker 太多 导出 画面卡死了。
    谢谢谢谢
    ciddechan
        6
    ciddechan  
       2021-04-19 16:59:56 +08:00   ❤️ 1
    bd 文档有大量点渲染方法
    AkideLiu
        7
    AkideLiu  
       2021-04-19 21:55:03 +08:00 via iPhone
    借楼问一下,最近在用 Google map vue,github 上大多数 lib 都是半死不活的。难道是 vue 不需要实现 map 这类的功能吗?还是大佬们都是自己封装
    NPC666
        8
    NPC666  
       2021-04-19 22:08:44 +08:00 via Android
    @AkideLiu gmap-vue
    AkideLiu
        9
    AkideLiu  
       2021-04-19 23:27:30 +08:00 via iPhone
    @NPC666 对现在用的就是这个,感觉活跃度很低,而且 upstream 多次断更
    zzw1998
        10
    zzw1998  
       2021-04-20 01:03:02 +08:00
    @AkideLiu 我用的是 vue2-google-maps
    OHyn
        11
    OHyn  
       2021-04-20 02:24:25 +08:00
    Vue2.x 遇到性能问题的,基本山都是往 data 里塞了无需和 view 绑定的数据。
    当年我把高德地图的实例塞进去了。。。😂
    还有一个事,就是尽量不要用 vue-baidu-map 这种封装好的二传手,否则遇到 bug 会很痛苦。
    uselessVisitor
        12
    uselessVisitor  
       2021-04-20 08:41:41 +08:00
    不要把点都放在 data 里。。
    woduzibue
        13
    woduzibue  
    OP
       2021-04-20 09:38:19 +08:00
    @OHyn 我找了几个教程说是用 vue-baidu-map 方便点。之前也没用过地图,后面有时间再研究研究,时间紧任务重,bug 就留给后面改的人吧 hhhh

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

    @ciddechan 可以可以 ,我再找找看,谢谢谢谢
    t2doo
        14
    t2doo  
       2021-04-20 14:00:30 +08:00
    前几年用百度地图写过, 纯 JS 的,没地用 Vue.当要显示的点位上了 5000 以上, 就很卡, 直接卡崩.后来用了 echarts 上面的百度地图包,1W+都不卡,秒开.
    woduzibue
        15
    woduzibue  
    OP
       2021-04-20 14:23:58 +08:00
    @t2doo echarts 也没用过,又多一种思路,谢谢
    OHyn
        16
    OHyn  
       2021-04-20 20:32:26 +08:00
    @t2doo echart 是纯 canvas 方案,点再多也不怕,近年来各大地图页加入了相关 api 。基于 dom 的方案确实不适合大数据量的情况。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1190 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 23:08 · PVG 07:08 · LAX 15:08 · JFK 18:08
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.