高德地图JSAPI报错：[Violation] ‘requestAnimationFrame‘ handler took 125ms

前端菜只因

497人浏览 · 2025-07-07 16:42:30

前端菜只因 · 2025-07-07 16:42:30 发布

高德地图JSAPI报错：[Violation] 'requestAnimationFrame' handler took 125ms

先说下我遇到的问题，vue3中使用高德地图绘制线路的时候，很卡掉帧，还报警告[Violation] ‘requestAnimationFrame’ handler took 125ms。

解决方法就是不把map实例存到reactive或者ref中，使用shallowRef来存。

之前我是这样写的：

const dataContainer = reactive({
    mouseTool: null,
    map: null
});
function initMap() {
    dataContainer.map = new AMap.Map("map", {
        center: [116.434381, 39.898515],
        zoom: 14
    });
    dataContainer.mouseTool= new AMap.MouseTool(dataContainer.map);
}

修改后：

import { shallowRef } from 'vue';

const mapContainer = shallowRef(null);
const mouseToolContainer = shallowRef(null);

function initMap() { 
    mapContainer.value = new AMap.Map("map", {
      center: [116.434381, 39.898515],
      zoom: 14
    });
    mouseToolContainer.value = new AMap.MouseTool(mapContainer.value);
 }