Есть ли способ запрограммировать кнопку закрытия инфобокса bingmap? - PullRequest
Новая
       7

Есть ли способ запрограммировать кнопку закрытия инфобокса bingmap?

0 голосов
/ 19 января 2019

В документации bingmaps вы можете добавить пользовательские действия в информационный блок . Я хотел бы знать, есть ли аналогичный способ программирования по умолчанию closeButton?

В идеале я хотел бы иметь возможность сделать что-то вроде этого: 

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

Ответы [ 2 ]

0 голосов
/ 25 января 2019

К сожалению, close обработчик событий не может быть настроен с помощью InfoboxOptions объекта , поэтому вы можете либо реализовать пользовательский 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>
0 голосов
/ 23 января 2019

Нет, я не думаю, что есть способ связать поведение кнопки закрытия по умолчанию по-другому.Тем не менее, вы можете приблизить желаемый результат, потратив немного больше времени: создав пользовательский информационный блок с тем же стилем, и вы получите 100% контроль:

например (обратите внимание на обработчик onClick на закрытиикнопка div): 

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