为什么我收到 InvalidArgumentError: H.Map (Argument #0 [object Object])答案

【问题标题】：Why am I getting InvalidArgumentError: H.Map (Argument #0 [object Object])为什么我收到 InvalidArgumentError: H.Map (Argument #0 [object Object])
【发布时间】：2021-07-20 19:38:52
【问题描述】：

下面是我从 Maps API for JavaScript“使用 React”部分重构的代码。我是 React 新手，在学校学习，我们必须使用函数式组件。 HERE 提供了类组件语法的指导，所以我希望这是一个翻译错误

import logo from './logo.svg';
import './App.css';
import React, {useState, useEffect} from 'react';
import H from "@here/maps-api-for-javascript";
import {maps} from "./Settings"

export const Map = () => {

  const [map, setMap] = useState()
    // // the reference to the container
    // const ref = React.createRef();
    // // reference to the map
    // const map = null;
   useEffect(() => {
    if (!map) {
      // instantiate a platform, default layers and a map as usual
      const platform = new H.service.Platform({
        apikey: `${maps.apiKey}`
      });
      const layers = platform.createDefaultLayers();
      debugger
      const newMap = new H.Map(
        layers.vector.normal.map,
        {
          pixelRatio: window.devicePixelRatio,
          center: {lat: 0, lng: 0},
          zoom: 2,
        },
      );
      setMap(newMap)
    }
   }, [])


    

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

【问题讨论】：

标签： javascript here-api

【解决方案1】：

您的代码不正确。

参数 #0 [object Object] 与 'new H.Map(' 的第一个参数相关，即 layers.vector.normal.map 但第一个参数应该是地图容器，例如 html 元素 div，第二个参数应该是图层.vector.normal.map。

您的代码应如下所示：

import React from 'react';
import H from "@here/maps-api-for-javascript";
import onResize from 'simple-element-resize-detector';

export default class Map extends React.Component {
  constructor(props) {
    super(props);
    // the reference to the container
    this.ref = React.createRef();
    // reference to the map
    this.map = null;
  }

  componentDidMount() {
    if (!this.map) {
      const platform = new H.service.Platform({
        apikey: `${maps.apiKey}`
      });
      const layers = platform.createDefaultLayers();
      const map = new H.Map(
        this.ref.current,
        layers.vector.normal.map,
        {
          pixelRatio: window.devicePixelRatio,
          center: {lat: 0, lng: 0},
          zoom: 2,
        },
      );
      onResize(this.ref.current, () => {
        map.getViewPort().resize();
      });
      this.map = map;
    }
  }
  
  render() {
    return (
      <div
        style={{ position: 'relative', width: '100%', height:'300px' }}
        ref={this.ref}
      />
    )
  }
  
}

请按照https://developer.here.com/documentation/maps/3.1.26.0/dev_guide/topics/react-practices.html上的说明进行操作

【讨论】：