Tengo un mapa con un icono marcado derivado de un archivo kml. El archivo kml es:

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

Quiero mostrar la información en una burbuja cuando se hace clic en el icono. El código que he escrito es:

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

Lamentablemente, no pasa nada cuando hago clic en el icono. La página está en https://wcsb.nz/wellringers/kmltest.html. Cualquier ayuda recibida con gratitud.

0
Derek Williams 23 ene. 2021 a las 04:52

1 respuesta

La mejor respuesta

Veo que estás usando ev.target.getPosition() dentro del controlador de eventos de tap. La función que desea utilizar es evt.target.getGeometry() en su lugar. Entonces, su fragmento de código se verá así.

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);
    }
});
0
Shruti Kuber 26 ene. 2021 a las 11:56