Question

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

理想情况下，我希望能够执行以下操作：

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进行自定义，因此您可以考虑使用implement a custom HTML Infobox或覆盖信息窗口点击处理程序。下面的示例演示了如何在单击关闭按钮并添加自定义操作后使信息窗口保持打开状态：

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的信息框关闭按钮进行编程？

2 个答案: