将 kml 文件中的信息添加到 Here Maps 中的弹出气泡

Question

我有一张地图，其图标标记为源自 kml 文件。 kml 文件是：

<?xml version="1.0" encoding="utf-8" ?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
    <name>Dove.kml</name>
    <Style id="Dove6">
        <IconStyle id="DoveRIconStyle">
            <Icon>
                <href>https://wcsb.nz/wellringers/dove6.bmp</href>
            </Icon>
        </IconStyle>
        <LabelStyle>
            <color>9fffffff</color>
            <scale>0.67</scale>
        </LabelStyle>
    </Style>
  <Placemark>
    <name>Ab Kettleby</name>
       <styleUrl>#Dove6</styleUrl>
      <Point>
         <coordinates>-0.92747,52.79858</coordinates>
      </Point>
  </Placemark>
  <Placemark>
        <name>Asfordby, Leics, 6, 12cwt, Mon</name>
        <styleUrl>#Dove6</styleUrl>
        <Point>
            <coordinates>-0.95214,52.76339,0</coordinates>
        </Point>
    </Placemark>
  </Document>
</kml>

我想在单击图标时在气泡中显示信息。我写的代码是：

const defaultLayers = platform.createDefaultLayers();
      const map = new H.Map(document.getElementById('map'),
         defaultLayers.vector.normal.map, {
         center: { lat: 52.79858, lng: -0.92747 },
         zoom: 15,
         pixelRatio: window.devicePixelRatio || 1
      });
      window.addEventListener('resize', () => map.getViewPort().resize());
      const behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
      const ui = H.ui.UI.createDefault(map, defaultLayers);
      let reader = new H.data.kml.Reader('doveshort1.kml');
reader.parse();
kml = reader.getLayer();
map.addLayer(kml);
      kml.getProvider().addEventListener('tap', function(ev) {
  const info = ev.target.getData();
  let content = '<b>' + info.name + '</b><br/>';
  let bubble =  new H.ui.InfoBubble(ev.target.getPosition(), {
    content: content
  });
  ui.addBubble(bubble);
});

遗憾的是，当我点击该图标时没有任何反应。该页面位于 https://wcsb.nz/wellringers/kmltest.html。非常感谢收到任何帮助。

Answer 1

我看到您在点击事件处理程序中使用了 ev.target.getPosition()。您要使用的函数是 evt.target.getGeometry()。所以你的代码片段看起来像这样。

kml.getProvider().addEventListener('tap', function (ev) {

    if (ev.target instanceof H.map.Marker) {
        const info = ev.target.getData();
        let content = '<b>' + info.name + '</b><br/>';
        let bubble =  new H.ui.InfoBubble(ev.target.getGeometry(), {
            content: content
        });
        ui.addBubble(bubble);
    }
});

将 kml 文件中的信息添加到 Here Maps 中的弹出气泡

Add information from kml file to popup bubble in Here Maps

popup

kml

heremaps