React 18+TypeScript集成HERE Map渲染失败问题求助

核心问题：缺失地图样式文件 #

HERE Maps API for JavaScript依赖官方样式文件来正确渲染地图瓦片与UI元素，你的代码未引入该文件，这是导致渲染异常的主要原因。

具体修复步骤 #

1. 引入HERE地图样式文件 #

在MapView组件或项目入口文件中添加样式引入：

import "@here/maps-api-for-javascript/dist/mapsjs.css";

2. 修正TypeScript的Ref类型 #

为useRef指定正确的DOM元素类型，消除类型安全隐患：

const ref = useRef<HTMLDivElement>(null);

3. 初始化地图交互组件（可选但推荐） #

若需要地图支持缩放、拖拽等交互能力，添加交互控制器与默认UI：

// 创建mapView后添加以下代码
const behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(mapView));
const ui = H.ui.UI.createDefault(mapView, defaultLayers);

4. 验证API Key有效性 #

确认环境变量REACT_APP_HERE_MAP_API_KEY已正确配置，且该Key拥有HERE Maps API的访问权限。

修复后的完整代码 #

import React, { useLayoutEffect, useRef } from 'react';
import H from "@here/maps-api-for-javascript";
// 引入HERE地图样式文件
import "@here/maps-api-for-javascript/dist/mapsjs.css";

function MapView(): JSX.Element {
  // 指定Ref类型为HTMLDivElement
  const ref = useRef<HTMLDivElement>(null);

  useLayoutEffect(() => {
    if (!ref.current) return;

    const platform = new H.service.Platform({
      apikey: process.env.REACT_APP_HERE_MAP_API_KEY,
    });
    const defaultLayers = platform.createDefaultLayers();
    const mapView = new H.Map(
      ref.current,
      defaultLayers.vector.normal.map,
      {
        pixelRatio: window.devicePixelRatio || 1,
        center: { lat: 0, lng: 0 },
        zoom: 2,
      },
    );

    // 添加地图交互支持
    const behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(mapView));
    // 添加默认UI控件
    const ui = H.ui.UI.createDefault(mapView, defaultLayers);

    return () => {
      mapView.dispose();
    };
  }, []);

  return (
    <div
      style={{ width: '300px', height: '300px' }}
      ref={ref}
    />
  );
}

export default MapView;

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