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

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

我遇到的问题是：在正确地遍历作为答案提供的公司并从中提取出我需要的公司后，我想匹配它们的徽标，并将其显示在

谷歌地图上

下面的代码几乎满足了我的需要：我创建了关联，但我无法在
谷歌地图
上可视化公司的图像（或徽标）：

从“React”导入React；
从“reactstrap”导入{Table}；
导入“../components/ShipTracker.css”；
从“../logos/donjon.jpg”导入donjonImage；
从“../logos/dutra.png”导入dutraImage；
从“../logos/greatlakesdredgeandock.png”导入GLD图像；
const shipCompanyMap={
密歇根州：“东戎”，
STUYVESANT：“DUTRA”，
Ellis_岛：“Greatlakesdredgeandock”
};
常数companyImageMap={
唐戎：唐戎形象，
DUTRA:dutraImage，
Greatrakesdredgeandock:glddImage，
};
const associationMap=Object.values（shipCompanyMap）.reduce(
（会计科目，当前）=>({
…acc，
[货币]：公司图像地图[货币]
}),
{}
);
常量Ship=（{Ship}）=>{
const shipName=ship.NAME；
const company=船舶公司映射[船舶名称]；
const shipImage=公司图像映射[公司]；
返回(
//  {
常量handleRowClick=（行值）=>{
console.log（rowValue）；
};
返回(
#
名称
呼号
标题
索格
依我所见
MMSI
经度
拉蒂图迪
{ships.map（（ship，index）=>{
常量{IMO，名称，呼号，航向，SOG，MMSI，经度，纬度}=船舶；
常量单元格=[名称、呼号、标题、SOG、IMO、MMSI、经度、纬度]；
返回(
HandlerRowClick（ship）}键={index}>
{index}
{cells.map（（cell）=>{cell}）
);
})}
);
};
导出默认ShipTracker；

到目前为止我所做的：

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

2） 在做了一些研究后，我发现了过滤功能，并尝试使用一些，但意识到这可能不是我需要的，因为我的协会应该是公司标志

3） 我没有经过任何物体。我怀疑我必须把它当作一个阵列，并开始朝这个方向努力。但是，由于我没有传递一个“真实”的对象，而是试图制作一个关联映射，因此传递对象不是一个好方法

感谢您为解决此问题指明了正确的方向。
您所说的“匹配他们的徽标”和“在谷歌地图上显示”是什么意思？@sallf，感谢您阅读此问题。每个公司都有一个标志。我知道他们的纬度和经度是API的答案，我想在
谷歌地图
上显示他们的徽标（他们在哪里）。我还不清楚。您的问题是将AIS API中的数据与
logos/
文件夹中的徽标匹配，还是将该徽标发送到Google Maps API？也许可以在codepen上做一个简单的例子？是的：），在
谷歌地图上发送该徽标，因为我已经有了纬度和经度。据我所知，你的代码没有显示这种集成。考虑从你的问题中删除<代码> ReACTJS < /代码>标签，并添加<代码>谷歌地图< /代码>，因为这不是一个反应问题。也许这会有帮助？