vue 引入高德地图 提示[Violation] ‘requestAnimationFrame‘ handler took ＜N＞ms警告

vue中使用高德地图

1.yarn add amap 或者 npm install amap --save

2.在index.html中引入地图；

<script type="text/javascript"
	src="https://webapi.amap.com/maps?v=1.4.4&key=（key）&plugin=AMap.Geocoder&plugin=AMap.Autocomplete&plugin=AMap.PolyEditor">
</script>

3. vue.config.js中写入

configureWebpack: {
  externals: {
    "AMap": "AMap"// 高德地图配置
  }
}

//或者

configureWebpack: config => {
    config.externals = {
      'AMap': 'AMap' // 高德地图配置
     }
},

解决AMap报错：AMap undefined报错

4.初始化地图

this.mapGd = new AMap.Map('container', {
      center: [116, 39],
      resizeEnable: true,
      zoom: 10
})
//更具情况初始化

4.解决css过度抖动问题

如果更新地图外层宽高会使地图计算更新后的大小造成

[Violation] 'requestAnimationFrame' handler took <N>ms

可使用padding或者margin，

如果使用ui框架如Ant Design of Vue的a-menu的话

可在地图外层加入position: fixed;定位，不设置top、left等