Javascript 此处映射未使用React正确渲染的信息气泡

我目前正在使用HERE Maps Javascript SDK开发一个React应用程序

我的问题是： 当我点击标记时，我想在标记上打开一个信息气泡

反而 这个奇怪的工件会被渲染，贴图最终会变成卡普特：

以下是相关的源代码：

const addEventsToMap=事件，H，hMap，ui=>{ 让标记=[]； events.mapel=>{ var icon=新的H.map.DomIconsvgMarkup， 坐标={lat:el.纬度，lng:el.经度}， marker=newh.map.DomMarkercoords，{icon:icon}； marker.setDataHello world marker.addEventListener'tap'，事件=>{ const bubble=new H.ui.InfoBubble{lat:el.Latitude，lng:el.Longitude}， { 内容：event.target.getData } ui.addBubblebubble； }，错 hMap.addObjectmarker； console.logel； } } React.useLayoutEffect=>{ //当这个钩子第一次运行时，`mapRef.current`将是`undefined`；边case if！mapRef.当前返回； console.loguserLocation； const H=window.H； const platform=新的H.service.platform{ apikey:“${process.env.REACT\u APP\u API\u KEY}”， 应用程序id:XXXXX }; const defaultLayers=platform.createDefaultLayers； const hMap=new H.MapmapRef.current，defaultLayers.vector.normal.map{ 中心：{lat:userLocation.lat，lng:userLocation.lgn}， 缩放：13， pixelRatio:window.devicePixelRatio | | 1 }; var icon=新的H.map.DomIconsvgMarkup， coords={lat:userLocation.lat，lng:userLocation.lgn}， marker=newh.map.DomMarkercoords，{icon:icon}； hMap.addObjectmarker； //添加要显示的初始事件 const behavior=new H.mapevents.behavior new H.mapevents.MapEventshMap； const ui=H.ui.ui.createDefaulthMap，defaultLayers； 添加了对手、H、hMap、ui； //一旦这个钩子再次运行，这将作为一个清理来运行。 //这包括组件何时卸载 返回=>{ hMap.dispose； }; }，[mapRef]； 我尝试的解决方案 我尝试将H.GeoPoint对象作为参数传递给InfoBubble，因为event.target.getPosition返回getPosition不是函数

如果有人能给我指出正确的方向，我会非常感激的

编辑

事实证明，这个巨大的黑色工件是infobubble的贴身图标。 以下屏幕截图显示了我希望显示的内容：

现在的问题是，为什么它会以这种方式呈现，是否有修复方法

---

如前所述，我正在使用HERE API文档提供的代码

我也有同样的问题。您可能还注意到，oyu没有可用的UI菜单，我猜在地图默认生成时也会显示一个巨大的+-缩放

解决方案：如果在此处安装js api，则需要在代码中导入js api/styles/mapsjs-ui.css，否则

---

就像一个符咒。

这看起来像一个巨大的复选标记。与大小有关吗？@parthsha没错，这是我点击标记时得到的信息，应该是一个信息气泡：你能设置一个沙箱吗？图标有什么？还是SVG？你试过用PNG来代替吗？我想问题可能出在我在互联网上找到的SVG上。布鲁，抛开它吧：这正是问题所在，我花了很多时间才弄清楚原因，有趣的是，在React文档中，他们没有提到你需要链接cssD