这里的地图在React中看起来是白色的

Question

我正在尝试使用 ReactJS 和 Here Maps 实现一个应用程序，但我的地图看起来是白色的，但它正确加载了徽标，显然它说我的 ApiKey 无权访问，但它确实如此，因为我有另一个用 AngularJS 构建的应用程序使用相同的并且有效

我也遵循了这里的文档：

https://www.here.com/docs/bundle/maps-api-for-javascript-developer-guide/page/topics/react-practices.html#define-react-components-to-display-restaurant-条目-网格中

我尝试了多种方法来传递 ApiKey，但它保持不变，正如你所看到的，我打开了控制台返回的 URL，它给了我这个错误：

这些是我的 React 堆栈控制台中的错误：

代码：

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

const apikey = 'MiAPiKey'

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

export default App;

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;

Answer 1

设置看起来正确，请使用新的 APP ID 创建新的 API 密钥来重试。