时间戳

首页 > 解决方案 > 将 kml 文件中的信息添加到 Here Maps 中的弹出气泡

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

问题描述

我有一张地图，上面标有从 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。感激地收到任何帮助。

标签： popupkmlheremaps

解决方案

我可以看到您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);
    }
});

推荐阅读