HERE 地图信息气泡无法使用 React 正确呈现

Question

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

我的问题：
我想在单击标记时在标记上打开一个信息气泡。

改为
这个奇怪的人工制品被渲染，地图最终变得卡普特：

相关源码如下：

const addEventsToMap = (events, H, hMap, ui) =>{
         let markers = [];
         events.map((el)=>{
          var icon = new H.map.DomIcon(svgMarkup),
           coords = {lat: el.Latitude, lng: el.Longitude},
           marker = new H.map.DomMarker(coords, {icon: icon});
           marker.setData("Hello world")
           marker.addEventListener('tap', event=>{
             const bubble = new H.ui.InfoBubble({lat:el.Latitude, lng:el.Longitude},
              {
               content: event.target.getData()
             })
             ui.addBubble(bubble);
           }, false)
          hMap.addObject(marker);
          console.log(el);
         })
     }
     
    React.useLayoutEffect(() => {
      // `mapRef.current` will be `undefined` when this hook first runs; edge case that
      if (!mapRef.current) return;
      console.log(userLocation);
      const H = window.H;
      const platform = new H.service.Platform({
          apikey: `${process.env.REACT_APP_API_KEY}`,
          app_id: "XXXXX"
      });
      const defaultLayers = platform.createDefaultLayers();
      const hMap = new H.Map(mapRef.current, defaultLayers.vector.normal.map, {
        center: { lat:userLocation.lat, lng: userLocation.lgn},
        zoom: 13,
        pixelRatio: window.devicePixelRatio || 1
      });

    var icon = new H.map.DomIcon(svgMarkup),
    coords = {lat: userLocation.lat, lng: userLocation.lgn},
    marker = new H.map.DomMarker(coords, {icon: icon});

    hMap.addObject(marker);
      
      //add initial events to be displayed
      
      const behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(hMap));
  
      const ui = H.ui.UI.createDefault(hMap, defaultLayers);
      addEventsToMap(posts, H, hMap, ui);
    

      // This will act as a cleanup to run once this hook runs again.
      // This includes when the component un-mounts
      return () => {
        hMap.dispose();
      };
    }, [mapRef]);

我尝试的解决方案
我尝试将 H.GeoPoint object 作为参数传递给 InfoBubble，如 event.target.getPosition() returns getPosition is not a function.

如果有人能指出正确的方向，我将不胜感激！

编辑

事实证明，巨大的黑色神器是“信息气泡的关闭图标”。下面的截图是我想要显示的内容：

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

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

Answer 1

我遇到了完全相同的问题。您可能还注意到 oyu 没有可用的 UI 菜单（一个巨大的“+”——我猜是缩放——也在地图默认生成时显示）。

解决方案：如果您安装了here-js-api，您需要在您的代码中导入here-js-api/styles/mapsjs-ui.css，否则<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />。

很有魅力。

HERE 地图信息气泡无法使用 React 正确呈现

HERE Maps Info bubble not rendering correctly using React

javascript

node.js

here-api

reactjs

heremaps