有没有办法对 bingmap 的信息框关闭按钮进行编程？

Question

在 bingmaps 文档中，您可以 add custom actions to the infobox。我想知道是否有类似的方法来对默认的关闭按钮进行编程？

理想情况下，我希望能够做这样的事情：

const infobox = new Microsoft.Maps.Infobox(selectedTipCoordinates, {
      title: selectedTip.title,
      description: selectedTip.description,
      closeButton: () => console.log('hello')
    });

Answer 1

不，我认为没有办法以不同方式连接默认关闭按钮的行为。也就是说，您可以通过更多的工作来近似获得所需的结果：创建一个具有相同样式的自定义信息框，然后您将拥有 100% 的控制权：

例如（注意关闭按钮 div 上的 onClick 处理程序）：

var center = map.getCenter();
var infoboxTemplate = '<div class="Infobox" style=""><a class="infobox-close" href="javascript:void(0)" onClick="function test(){ alert(\'test!\');  } test(); return false;" style=""><img class="infobox-close-img" src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjE0cHgiIHdpZHRoPSIxNHB4IiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiPjxwYXRoIGQ9Ik03LDBDMy4xMzQsMCwwLDMuMTM0LDAsN2MwLDMuODY3LDMuMTM0LDcsNyw3YzMuODY3LDAsNy0zLjEzMyw3LTdDMTQsMy4xMzQsMTAuODY3LDAsNywweiBNMTAuNSw5LjVsLTEsMUw3LDhsLTIuNSwyLjVsLTEtMUw2LDdMMy41LDQuNWwxLTFMNyw2bDIuNS0yLjVsMSwxTDgsN0wxMC41LDkuNXoiLz48L3N2Zz4=" alt="close infobox"></a><div class="infobox-body" style="max-width: 256px; max-height: 126px; width: 125px;"><div class="infobox-title" >{title}</div><div class="infobox-info" style=""><div>{description}</div></div><div class="infobox-actions" style="display: none;"><ul class="infobox-actions-list"><div></div></ul></div></div><div class="infobox-stalk" style="top: 73.8px; left: 55.5px;"></div></div>';
var infobox = new Microsoft.Maps.Infobox(center, {
    htmlContent: infoboxTemplate.replace('{title}', 'myTitle').replace('{description}', 'myDescription'),
    offset: new Microsoft.Maps.Point(-64, 16)
});

Answer 2

很遗憾，close 事件处理程序无法通过 InfoboxOptions object, so you could consider either to implement a custom HTML Infobox 或 覆盖信息 window 单击处理程序 进行自定义。以下示例演示如何在单击关闭按钮后保持信息 window 打开并添加自定义操作：

Microsoft.Maps.Events.addHandler(infobox, 'click', handleClickInfoBox);

function handleClickInfoBox(e){
  var isCloseAction = e.originalEvent.target.className == "infobox-close-img";
  if(isCloseAction){
    //keep info window open..
    e.target.setOptions({visible: true}); 
    //apply some custom actions..
    console.log("Close button clicked");
  }
}

function loadMapScenario() {
  var map = new Microsoft.Maps.Map(document.getElementById("myMap"), {
    center: new Microsoft.Maps.Location(47.60357, -122.32945)
  });
  var infobox = new Microsoft.Maps.Infobox(map.getCenter(), {
    title: "Title",
    description: "Description",
    actions: [
      {
        label: "Handler1",
        eventHandler: function() {
          console.log("Handler1");
        }
      },
      {
        label: "Handler2",
        eventHandler: function() {
          console.log("Handler2");
        }
      },
      {
        label: "Handler3",
        eventHandler: function() {
          console.log("Handler3");
        }
      }
    ]
  });
  infobox.setMap(map);
  Microsoft.Maps.Events.addHandler(infobox, 'click', handleClickInfoBox);
}

function handleClickInfoBox(e){
  var isCloseAction = e.originalEvent.target.className == "infobox-close-img";
  if(isCloseAction){
    //keep info window open..
    e.target.setOptions({visible: true}); 
    //apply some custom actions..
    console.log("Close button clicked");
  }
}

body{
   margin:0;
   padding:0;
   overflow:hidden;
}

<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?key=&callback=loadMapScenario' async defer></script>
<div id='myMap' style='width: 100vw; height: 100vh;'></div>

有没有办法对 bingmap 的信息框关闭按钮进行编程？

Is there a way to programme bingmap's infobox close button?

bing-maps