javascript - HERE map 信息气泡无法使用 React 正确呈现

Question

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

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

代替
这个奇怪的人工制品被渲染了， map 最终变成了 kaputt:

相关源码如下:

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 对象作为参数传递给 InfoBubble，因为 event.target.getPosition() 返回 getPosition is not a function。

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

编辑

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

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

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

Answer 1

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

解决方案:如果您安装了 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" />否则。

像魅力一样工作。