React+TypeScript环境下HERE地图无法渲染仅显示空白问题求助

我使用TypeScript开发React项目时，HERE地图组件无法正常渲染，仅显示空白界面及“here”文本。已在地图组件中配置zoom、location、map settings等参数，通过地图容器组件进行渲染。单独创建测试HTML文件验证过API Key有效，但问题仅出现在当前React项目中。

地图组件代码 #

const HEREMap: React.FC<HEREMapProps> = props => {
  const mapRef = useRef(null);
  const [view, setView] = useState({
    zoom: 10,
    lat: 52.5,
    lng: 13.4,
  });
  const ui = useRef<H.ui.UI | null>(null);
  const map = useRef<H.Map | null>(null);
  const group = useRef<H.map.Group | null>(null);
  const icons: Record<string, H.map.Icon> = {};

  useEffect(() => {
    if (!mapRef.current) {
      console.error('Map reference is null');
      return;
    }

    const platform = new H.service.Platform({
      apikey: key,
    });

    const defaultLayers = platform.createDefaultLayers() as any;
    console.log('Default layers created', defaultLayers);

    map.current = new H.Map(mapRef.current, defaultLayers.vector.normal.map, {
      center: { lat: view.lat, lng: view.lng },
      zoom: view.zoom,
      pixelRatio: window.devicePixelRatio || 1,
    });
    console.log('Map initialized', map);

    // Add map interaction
    new H.mapevents.Behavior(new H.mapevents.MapEvents(map.current));
    window.addEventListener('resize', () =>
      map.current?.getViewPort().resize(),
    );

    // Add UI components
    ui.current = H.ui.UI.createDefault(map.current, defaultLayers);
    ui.current
      ?.getControl('zoom')
      ?.setAlignment(H.ui.LayoutAlignment.BOTTOM_RIGHT);
    ui.current?.getControl('scalebar')?.setVisibility(false);
    ui.current?.getControl('mapsettings')?.setVisibility(true);

    console.log('UI components added', ui);

    group.current = new H.map.Group();
    map.current.addObject(group.current);

    // Event listeners
    map.current.addEventListener('mapviewchangeend', handleMapViewChange);
    map.current.addEventListener('pointermove', onHoverMarker, false);
    group.current.addEventListener('tap', onTap, false);

    return () => {
      map.current?.dispose();
      console.log('Map disposed');
      window.removeEventListener('resize', () =>
        map.current?.getViewPort().resize(),
      );
    };
  }, []);

  useEffect(() => {
    if (!group.current) return;

    group.current.removeAll();
    props.markers.forEach((m: any) => addMarkerToGroup(group.current, m));

    setTimeout(() => {
      const bounds = group.current?.getBoundingBox();
      if (bounds) {
        map.current?.getViewModel().setLookAtData({ bounds });
      }
    }, 1000);
  }, [props.markers]);

  const getMarkerIcon = (dp: any) => {
    const iconMarkup = props.markerIcon(dp);
    if (!icons[iconMarkup]) {
      icons[iconMarkup] = new H.map.Icon(iconMarkup);
    }
    return icons[iconMarkup];
  };


  const handleMapViewChange = (ev: { target: any }) => {
    const { target } = ev;
    const center = target.getCenter();
    const zoom = target.getZoom();
    setView({ zoom, lat: center.lat, lng: center.lng });
  };

  const onTap = (evt: { target: { getData: () => any } }) =>
    props.onClickMarker && props.onClickMarker(evt.target.getData());

  return <div ref={mapRef} style={{ width: '100%', height: '100vh' }} />;
};

export default HEREMap;

地图容器代码 #

import React from 'react';
import MapView from '../../components/MapView';

const Map: React.FC = () => {
  const markers = [{ latitude: 52.5, longitude: 13.4 }];

  const tooltipContent = (marker: { latitude: number; longitude: number }) =>
    `<div>Latitude: ${marker.latitude}, Longitude: ${marker.longitude}</div>`;

  const iconYellow = `
    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
      <g filter="url(#filter0_dd_17563_7848)">
        <circle cx="14" cy="14" r="10" fill="#F5CC00"/>
      </g>
    </svg>`;

  const markerIcon = () => iconYellow;

  return (
    <div style={{ width: '100%', height: '100vh' }}>
      <MapView
        markers={markers}
        markerIcon={markerIcon}
        tooltipContent={tooltipContent}
        wrapperClasss="map-wrapper"
      />
    </div>
  );
};

export default Map;

当前浏览器仅显示空白界面及“here”文本，期望能正常显示HERE地图街景视图。

内容的提问来源于stack exchange，提问作者Anushka Choudhary