React集成Here Maps显示白屏（ApiKey权限异常）

我在ReactJS项目中集成Here Maps时遇到白屏问题，仅能正常加载地图logo。控制台提示API密钥无访问权限，但该密钥在AngularJS项目中可正常使用。我已经按照官方文档操作，尝试了多种传递API密钥的方式都没解决，控制台返回的请求URL出现403错误（截图：），React控制台报错截图：。

相关代码 #

App.js

import Map from './Maps';
import React, { useState } from 'react';

const apikey = 'MiAPiKey'

function App() {
  return (
    <div>
      <Map apikey={apikey} />
    </div>
  );
};

export default App;

Maps.js

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

const Map = ( props ) => {
  const mapRef = useRef(null);
  const map = useRef(null);
  const platform = useRef(null)
  const { apikey } = props;
  
  useEffect(
    () => {
      // Check if the map object has already been created
      if (!map.current) {
        // Create a platform object with the API key
        platform.current = new H.service.Platform({ apikey });
        // Create a new Raster Tile service instance
        const rasterTileService = platform.current.getRasterTileService({
          queryParams: {
            style: "explore.day",
            size: 512,
          },
        });
        // Creates a new instance of the H.service.rasterTile.Provider class
        // The class provides raster tiles for a given tile layer ID and pixel format
        const rasterTileProvider = new H.service.rasterTile.Provider(
          rasterTileService
        );
        // Create a new Tile layer with the Raster Tile provider
        const rasterTileLayer = new H.map.layer.TileLayer(rasterTileProvider);
        // Create a new map instance with the Tile layer, center and zoom level
        const newMap = new H.Map(mapRef.current, rasterTileLayer, {
          pixelRatio: window.devicePixelRatio,
          center: {
            lat: 4.5977444,
            lng: -74.1122391,
          },
          zoom: 16,
        });
  
        // Add panning and zooming behavior to the map
        const behavior = new H.mapevents.Behavior(
          new H.mapevents.MapEvents(newMap)
        );

        // Create the default UI components
        const ui = H.ui.UI.createDefault(newMap, rasterTileLayer);
  
        // Set the map object to the reference
        map.current = newMap;
      }
    },
    // Dependencies array
    [apikey]
  );
    // Return a div element to hold the map
    return <div style={ { width: "100vw", height: "90vh" } } ref={mapRef} />;
}
export default Map;

问题排查与解决方案 #

1. 检查API密钥的域名授权 #

Here Maps的API密钥需要绑定允许访问的域名，即使在Angular项目可用，也要确认React项目的域名是否在授权列表中：

• 登录Here开发者控制台，找到该API密钥的配置页面
• 在Referer Restrictions中添加React项目的本地开发域名（如http://localhost:3000）和生产环境域名
• 保存配置后等待几分钟生效，再重新测试

2. 替换图层创建逻辑为官方推荐方式 #

你当前使用的Raster Tile Service创建方式可能存在参数不兼容问题，尝试改用官方默认图层创建方法：

// 替换Maps.js中图层创建的相关代码：
// 原代码：
// const rasterTileService = platform.current.getRasterTileService({...});
// ...
// const rasterTileLayer = new H.map.layer.TileLayer(rasterTileProvider);

// 替换为：
const defaultLayers = platform.current.createDefaultLayers();
// 使用矢量图层或栅格图层均可，这里以矢量图层为例
const mapLayer = defaultLayers.vector.normal.map;

const newMap = new H.Map(mapRef.current, mapLayer, {
  pixelRatio: window.devicePixelRatio,
  center: { lat: 4.5977444, lng: -74.1122391 },
  zoom: 16
});

// UI组件创建也需要对应调整：
const ui = H.ui.UI.createDefault(newMap, defaultLayers);

3. 验证API密钥的正确性与传递 #

• 确认apikey变量中的密钥字符串没有拼写错误，Here的API密钥大小写敏感
• 可以尝试直接在new H.service.Platform({ apikey: '你的密钥' })中写入密钥，排除组件传递过程中的潜在问题

4. 排查跨域与网络环境 #

• 如果是本地开发，检查浏览器控制台是否有跨域错误，若存在可尝试在React项目中配置代理（在package.json添加"proxy": "https://xyz.api.here.com"），不过Here Maps通常无需额外代理
• 确认网络环境没有拦截Here的API请求，比如防火墙、VPN等可能导致的请求异常

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