Question

我无法为我的生活获得点击事件来处理自定义HTML Microsoft Bing Maps信息框元素。以下代码在Bing地图之外的任何li上触发事件，但不在内部：

$('body').on('click', 'li', function (e) {
   console.log("target:", e.target);
});

attaching "actions" to basic default infoboxes上有一些文档，但没有关于自定义HTML信息框事件的信息。它们似乎已禁用所有自定义信息框的事件。谁能证实这一点？他们为什么要这样做？我怎么能绕过它？

Answer 1

尝试示例网站

Examples

不确定jquery片段是否有效以及信息框是否包含＆＃34; li＆＃34;。

我在该html版本中放置了以下JS，这会创建一个事件并生成一条消息，将其放入运行框中尝试：

map.entities.clear(); 
 function handlerEvent1 () 
 { 
 displayAlert('Handler1');
 } 
 function handlerEvent2 () 
  {  
 displayAlert('Handler2'); 
 } 
 function handlerEvent3 () 
{ 
 displayAlert('Handler3'); 
}
 var infoboxOptions = {width :200, height :100, showCloseButton: true, zIndex: 0, offset:new Microsoft.Maps.Point(10,0), showPointer: true}; 
 var defaultInfobox = new Microsoft.Maps.Infobox(map.getCenter(), infoboxOptions );    
 map.entities.push(defaultInfobox);
 defaultInfobox.setHtmlContent('<div id="infoboxText" style="background-color:White; border-style:solid;border-width:medium; border-color:DarkOrange; min-height:100px;width:240px;"><b id="infoboxTitle" style="position:absolute; top:10px; left:10px; width:220px;">myTitle</b><div id="infoboxDescription" style="position:absolute; top:30px; left:10px; width:220px;" onclick="handlerEvent3 ()">Description</div></div>');

同样从示例代码中，document.ready没有等待，因此您应该将脚本放在页面底部或者：

$( document ).ready(function() {
  $('body').on('click', 'li', function (e) {
     console.log("target:", e.target);
  });
});

点击可能也没有用，因为＆＃34; LI＆＃34;在信息框代码中被严重渲染（未提供）。

Answer 2

他们的文档现在说：

InfoboxActions已包含在Bing Maps V8中，主要是为了与V7向后兼容。相反，建议在信息框说明中使用标准的HTML按钮和链接。

因此，PeterS提供的好答案可能不再是进行下一步的最佳方法。相反，我使用“ onclick”属性将自己的链接添加到pushPin元数据。相关代码在下面的第9行。

var pLoc = new Microsoft.Maps.Location(c.Latitude, c.Longitude);
var pin = new Microsoft.Maps.Pushpin(pLoc, {
    title: c.Name,
    enableHoverStyle: true
});

pin.metadata = {
    title: c.Name,
    description: c.Description + 
          '<a href="#" onclick="javascript:showDetails(' + c.Id + ');">Details</a>'
};

Microsoft.Maps.Events.addHandler(pin, 'click', function (args) {
    myInfobox.setOptions({
        location: args.target.getLocation(),
        title: args.target.metadata.title,
        description: args.target.metadata.description,
        visible: true
    });
});

...

function showDetails(id) {
    alert(id);
}

为简单起见，我省略了有关如何构造myInfoBox以及将图钉添加到地图图层的详细信息。

Bing在自定义信息框html上映射点击事件

2 个答案: