ant design pro v6如何引入第三方js?如腾讯地图等!

由于ant pro隐藏.html,需要通过他们约定的方式引入即可。

1.配置config文件

/config/config.ts
  headScripts: [
    // 解决首次加载时白屏的问题
    { src: '/scripts/loading.js', async: true },
    { src: "https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77", async: true },//在这里引入
  ],

2.使用

  useEffect(() => {
    const center = new TMap.LatLng(39.984104, 116.307503);
    //初始化地图
    const map = new TMap.Map('container', {
      rotation: 20, //设置地图旋转角度
      pitch: 30, //设置俯仰角度(0~45)
      zoom: 12, //设置地图缩放级别
      center: center, //设置地图中心点坐标
    });
  }, []);
  <div id="container">13</div>

这个时候会报红
ant design pro v6如何引入第三方js?如腾讯地图等!_第1张图片
解决

/typings.d.ts
declare const TMap: any;//增加这一行即可

3.效果

ant design pro v6如何引入第三方js?如腾讯地图等!_第2张图片

你可能感兴趣的:(ant,design,pro,react,前端,javascript,react,前端,ant,pro)