vue3+ts+setup语法糖，导入高德地图AMapUI组件，样式发生偏移？

Question

vue3+ts+setup语法糖，导入高德地图AMapUI组件，样式发生偏移

<template>
  <div id="container"></div>
</template>

<script setup lang="ts">
import { onMounted,onUnmounted,ref} from 'vue';
import AMapLoader from "@amap/amap-jsapi-loader";
let map: any
  onMounted(() => {
(window as any)._AMapSecurityConfig = {
  securityJsCode: "xxxxx",
};
AMapLoader.load({
  key: "xxxxxxxx", // 申请好的Web端开发者Key，首次调用 load 时必填
  version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
  // plugins: ["AMap.ControlBar","AMap.Scale"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  AMapUI:{
    version:'1.1',
    plugins: ["misc/PathSimplifier","overlay/SimpleMarker"]
  }
})
  .then((AMap) => {
    map = new AMap.Map("container", {
      mapStyle: "amap://styles/dark", //设置地图的显示样式
      // 设置地图容器id
      // viewMode: "2D", // 是否为3D地图模式
      zoom: 4, // 初始化地图级别
      // center: [121.473701, 31.230416], // 初始化地图中心点位置
    });
    AMapUI.load(['ui/misc/PointSimplifier', 'lib/$'], function(PointSimplifier, $) {
      if (!PointSimplifier.supportCanvas) {
          alert('当前环境不支持 Canvas！');
          return;
      }
      var pointSimplifierIns = new PointSimplifier({
          map: map, //所属的地图实例
          getPosition: function(item) {
              if (!item) {
                  return null;
              }
              var parts = item.split(',');
              //返回经纬度
              return [parseFloat(parts[0]), parseFloat(parts[1])];
          },
          getHoverTitle: function(dataItem, idx) {
              return idx + ': ' + dataItem;
          },
          renderOptions: {
              //点的样式
              pointStyle: {
                  width: 6,
                  height: 6
              },
              //鼠标hover时的title信息
              hoverTitleStyle: {
                  position: 'top'
              }
          }
      });
      window.pointSimplifierIns = pointSimplifierIns;
      $('<div id="loadingTip">加载数据，请稍候...</div>').appendTo(document.body);
      $.get('https://a.amap.com/amap-ui/static/data/10w.txt', function(csv) {
          var data = csv.split('\n');
          pointSimplifierIns.setData(data);
          $('#loadingTip').remove();
      });
      pointSimplifierIns.on('pointClick pointMouseover pointMouseout', function(e, record) {
      });
    });
  })
  .catch((e) => {
    console.log(e);
  });
  });
  onUnmounted(() => {
    map?.destroy();
  });

</script>
<style scoped>
  #container {
      width: 100%;
      height: 800px;
      margin: 0px;
  }
  #loadingTip {
      position: absolute;
      z-index: 9999;
      top: 0;
      left: 0;
      padding: 3px 10px;
      background: red;
      color: #fff;
      font-size: 14px;
  }
  </style>

以上是前端代码，直接调用高德地图的官方文档例子，类似的情况有大佬遇到过吗，
官方例子：https://developer.amap.com/demo/amap-ui/demos/amap-ui-pointsi...
本地示例图片：