Utilizo un png transparente como superposición de suelo que cubre todo el mapa. Debo configurar underLabels=false porque la capa de etiqueta del mapa hace que algunas partes de mi superposición sean ilegibles. Pero con underLabels=false todos los eventos del mouse/teclado van a mi superposición de suelo, ya no al mapa. Sé que esto está documentado pero no quiero eso, ¿cómo puedo enrutar esos eventos al mapa? En google-api, simplemente declaro la superposición de suelo como no se puede hacer clic. ¿O hay alguna otra forma de poner un png transparente encima de todo el mapa sin capturar también todos los eventos?
Creo que para que los eventos del mouse pasen por la superposición del suelo, el estilo CSS pointer-events debe establecerse en none . Creo que esto no es compatible con imágenes en IE10 (navegador mínimo compatible con Bing Maps cuando se lanzó este SDK, por lo que es probable que esta no sea una opción integrada). Experimentando un poco, lo siguiente parece funcionar:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> var map, overlay; function GetMap() { map = new Microsoft.Maps.Map('#myMap', { center: new Microsoft.Maps.Location(-16.366, -46.8945), zoom: 17 }); overlay = new Microsoft.Maps.GroundOverlay({ bounds: Microsoft.Maps.LocationRect.fromEdges(-16.36523189120857, -46.89686679103114, -16.3674247514764, -46.89337059621697), imageUrl: 'https://upload.wikimedia.org/wikipedia/commons/e/e9/Foto_a%C3%A9rea_de_Una%C3%AD_detalhando_o_c%C3%B3rrego_Canabrava_3.jpg', rotation: 298, beneathLabels: false }); map.layers.insert(overlay); //Access the underlying image object and disable pointer events so that mouse events flow through to the map. overlay._img.style.pointerEvents = 'none'; } </script> <script async defer src="https://bing.com/api/maps/mapcontrol?callback=GetMap&key=[Your Bing Maps Key]"></script> </head> <body> <div id="myMap" style="position:relative;width:800px;height:600px;"></div> </body> </html>