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

Question

我这辈子都无法让点击事件处理自定义 HTML Microsoft Bing 地图信息框元素。以下代码在 Bing 地图之外但不在地图内部的任何 li 上触发事件：

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

有一些关于 attaching "actions" to basic default infoboxes 的文档，但没有关于自定义 HTML 信息框事件的信息。看来他们已禁用自定义信息框的所有事件。谁能证实这一点？他们为什么要这样做？我该如何解决？

Answer 1

尝试示例网站

Examples

不确定 jquery 片段是否有效，如果信息框甚至包含 "li"。

我在 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);
  });
});

点击也可能无效，因为 "LI" 在信息框代码（未提供）中呈现错误。

Answer 2

他们的文档现在说：

InfoboxActions have been included in Bing Maps V8 primarily for backwards compatibility with V7. Instead it is recommended to use standard HTML buttons and links in the infobox description.

因此，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

Bing maps click event on custom infobox html

javascript

jquery

bing-maps