Bing 在自定義信息框 html 上映射單擊事件

Question

我一生都無法獲得單擊事件來處理自定義 HTML Microsoft Bing 地圖信息框元素。 以下代碼在 Bing 地圖之外但不在內部的任何 li 上觸發事件：

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

有一些關於將“操作”附加到基本默認信息框的文檔，但沒有關於自定義 HTML 信息框事件的信息。 看來他們已禁用自定義信息框的所有事件。 任何人都可以證實這一點嗎？ 他們為什么要這樣做？ 我怎樣才能解決它？

Answer 1

嘗試示例站點

例子

不確定 jquery 代碼段是否有效，以及信息框是否包含“li”。

我將以下 JS 放在該 html 版本中，這會創建一個事件並生成一條消息，將其放入運行框中以嘗試：

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

他們的文檔現在說：

Bing Maps V8 中包含 InfoboxActions 主要是為了向后兼容 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 以及如何將圖釘添加到地圖圖層的詳細信息。