javascript - React js - 如何在谷歌地图上可视化图像

Question

我正在创建一个小型应用程序，它根据AIS Hub中船只的纬度和经度，将定位船只并在谷歌地图上显示其徽标。我映射了每个公司和每个徽标，如下所示。

我遇到的问题是：在正确遍历作为AIS Hub API答案提供的公司并提取我需要的公司后，我想匹配他们的徽标并将其显示在google-map.

在几乎可以满足我需要的代码下方：我建立了关联，但我无法在以下位置可视化公司的图像（或徽标）google-map：

import React from 'react';
import { Table } from 'reactstrap';
import '../components/ShipTracker.css';

import donjonImage from '../logos/donjon.jpg';
import dutraImage from '../logos/dutra.png';
import glddImage from '../logos/greatlakesdredgeanddock.png';


const shipCompanyMap = {
  Michigan: 'DONJON',
  STUYVESANT: 'DUTRA',
  Ellis_Island: 'GREATLAKESDREDGEANDDOCK'
};

const companyImageMap = {
  DONJON: donjonImage,
  DUTRA: dutraImage,
  GREATLAKESDREDGEANDDOCK: glddImage,
};

const associationMap = Object.values(shipCompanyMap).reduce(
  (acc, curr) => ({
    ...acc,
    [curr]: companyImageMap[curr]
  }),
  {}
);


const Ship = ({ ship }) => {
  const shipName = ship.NAME;
  const company = shipCompanyMap[shipName];
  const shipImage = companyImageMap[company];

  return (
    <div>
      <img src={glddImage} alt="Logo" /> // <-- I think this is where the loop should go
    </div>
  );
};


const ShipTracker = ({ ships }) => {
  const handleRowClick = (rowValue) => {
    console.log(rowValue);
  };
  return (
    <div className="ship-tracker">
      <Table className="flags-table" responsive hover>
        <thead>
          <tr>
            <th>#</th>
            <th>Name</th>
            <th>Callsign</th>
            <th>Heading</th>
            <th>SOG</th>
            <th>IMO</th>
            <th>MMSI</th>
            <th>Longitude</th>
            <th>Latitudee</th>
          </tr>
        </thead>
        <tbody>
          {ships.map((ship, index) => {
            const { IMO, NAME, CALLSIGN, HEADING, SOG, MMSI, LONGITUDE, LATITUDE } = ship;
            const cells = [ NAME, CALLSIGN, HEADING, SOG, IMO, MMSI, LONGITUDE, LATITUDE ];
            return (
              <tr onClick={() => handleRowClick(ship)} key={index}>
                <th scope="row">{index}</th>
                {cells.map((cell) => <td>{cell}</td>)}
              </tr>
            );
          })}
        </tbody>
      </Table>
    </div>
  );
};

export default ShipTracker;

到目前为止我做了什么：

1）我相信这是一个循环问题。我试图循环通过提供的 API 提取的公司并提取其位置，我试图将该公司与其徽标匹配并将其显示在谷歌地图上，但我不确定如何组织循环。

2）在做了一些研究之后，我遇到了过滤功能并尝试使用了一点，但意识到这可能不是我需要的，因为我的关联应该是公司 <--> 徽标。

3）我没有传递一个物体。我怀疑我必须将它视为一个数组并开始朝那个方向工作。但由于我没有传递“真实”对象，而是试图制作关联图，因此传递对象并不是一个好方法。

感谢您指出解决此问题的正确方向。

标签： javascriptreactjs