热力图使用基于 zoom 计算得到的 radius 引发异常"TypeError: e.setOptions is not a function"

z333d commented 6 years ago

[BUG 反馈] 热力图使用基于 zoom 计算得到的 radius 引发异常"TypeError: e.setOptions is not a function"

浏览器版本号

Chrome 最新版

Vue 版本号

2.5.17

组件库版本号

0.21.11

现象描述

热力图使用基于 zoom 计算得到的 radius 会引发异常"TypeError: e.setOptions is not a function"

完整异常信息

vue.js:597 [Vue warn]: Error in callback for watcher "radius": "TypeError: e.setOptions is not a function"

found in

---> <BmlHeatmap>
       <BmMap>
         <Root>
warn @ vue.js:597
logError @ vue.js:1739
globalHandleError @ vue.js:1734
handleError @ vue.js:1723
run @ vue.js:3233
flushSchedulerQueue @ vue.js:2981
(anonymous) @ vue.js:1839
flushCallbacks @ vue.js:1760
vue.js:1743 TypeError: e.setOptions is not a function
    at VueComponent.radius (index.js:1)
    at Watcher.run (vue.js:3231)
    at flushSchedulerQueue (vue.js:2981)
    at Array.<anonymous> (vue.js:1839)
    at MessagePort.flushCallbacks (vue.js:1760)

在线示例 / 仓库 URL

https://jsfiddle.net/eywraw8t/345627/

复现用例

见在线示例

预期输出

radius 正常影响热力图的渲染

实际输出

报错

liucien commented 5 years ago

这个bug下个版本能修复么，试了一下找不到什么方法去规避 @Dafrok

pndllxzzy commented 5 years ago

先移除heatmap对radius的watch

this.$refs.heatmap._watchers.some(item => {
    if(item.expression === 'radius'){
        item.teardown()
        return true;
    }
})

然后改变radius后调用

this.$refs.heatmap.reload();

或者直接改vue-baidu-map/index.js 把 originInstance.setOptions() 改成 this.reload()

Dafrok / vue-baidu-map

热力图使用基于 zoom 计算得到的 radius 引发异常"TypeError: e.setOptions is not a function" #470