HERE Maps API for JavaScript（React - TypeScript/Vite 捆绑程序）中的“图层”类型上不存在属性“向量”

Question

我正在尝试使用 HERE Maps API @here/maps-api-for-javascript 最新版本("@here/maps-api-for-javascript": "^1.54.1") 集成地图位置 API Reactjs 项目。使用 vite bundler 创建的应用程序，并使用 TypeScript 进行开发。

当我运行 npm run build 时，出现错误：以下代码中的“属性‘向量’在类型‘Layer’.ts(2339) 上不存在”：

const newMap = new H.Map(
        mapRef.current,
        defaultLayers.vector.normal.map,
        {
          pixelRatio: 2,
          zoom: 17,
          center: position,
        }
      );

HERE 开发者支持可以提供帮助吗？ 如果您希望我提供更多背景信息，我非常乐意这样做。

我尝试了多种配置，包括使用类型断言，如下所示：

const defaultLayers = platform.createDefaultLayers(512,  320) as H.map.layer.Layer

Answer 1

错误“‘Layer’类型上不存在属性‘向量’”表示 TypeScript 无法正确推断

defaultLayers

返回的

platform.createDefaultLayers()

的类型。

以下是解决此问题的步骤：

第 1 步：安装所需的软件包

确保您已安装所需的 TypeScript 定义。您可以使用 npm 添加这些依赖项：

npm install @here/maps-api-for-javascript @types/heremaps

第 2 步：更新 TypeScript 配置

确保您的

tsconfig.json

文件包含必要的类型定义：

{
  "compilerOptions": {
    "typeRoots": ["./node_modules/@types"],
    "types": ["heremaps"]
  }
}

第3步：定义地图组件

这是集成 HERE Maps API 的 React 组件的示例。此示例包含类型断言，以帮助 TypeScript 理解

defaultLayers

的类型。

import React, { useEffect, useRef } from 'react';
import H from '@here/maps-api-for-javascript';

interface MapProps {
  position: { lat: number; lng: number };
}

const Map: React.FC<MapProps> = ({ position }) => {
  const mapRef = useRef<HTMLDivElement | null>(null);

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

    const platform = new H.service.Platform({
      apikey: 'YOUR_API_KEY'
    });

    const defaultLayers = platform.createDefaultLayers();

    // Type assertion to help TypeScript understand the type
    const vectorLayer = defaultLayers.vector as H.service.MapType;

    const map = new H.Map(mapRef.current, vectorLayer.normal.map, {
      pixelRatio: window.devicePixelRatio || 1,
      zoom: 17,
      center: position,
    });

    const behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
    const ui = H.ui.UI.createDefault(map, defaultLayers);

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

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

export default Map;

检查 API 密钥权限：确保您的 API 密钥具有正确的权限并且配置正确。

• TypeScript 定义：确保在您的项目中安装并正确配置了

  @types/heremaps

  。
• Vite 配置：Vite 应正确处理捆绑，但确保您拥有必要的配置，特别是在您使用任何自定义设置时。

问候！