Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
3.7k views
in Technique[技术] by (71.8m points)

Add information from kml file to popup bubble in Here Maps

I have a map with an icon marked derived from a kml file. The kml file is:

<?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>

I want to show the information in in a bubble when the icon is clicked. The code I have written is :

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);
});

Sadly nothing happens when I click the icon. The page is at https://wcsb.nz/wellringers/kmltest.html. Any help gratefully received.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)
等待大神解答

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...