Bing Maps Infobox setHtmlСодержание не работает

Question

У меня есть следующий код для Bing Maps на моем сайте. Это следует за примерами, приведенными на http://www.bingmapsportal.com/isdk/ajaxv7#Infobox20. Но ни свойство htmlContent в infoboxOptions, ни метод setHtmlContent(), кажется, не добавляют цвет фона, который я хочу для Infobox. Сам Infobox отображается правильно. Другие свойства также работают.

$(document).ready(function() { 

    var map = null; 

    function getMap() { 

     // Get the Map 
     var map = new Microsoft.Maps.Map(document.getElementById('mapDiv'), 
        { 
         credentials: "Bing Maps Key", 
         center: new Microsoft.Maps.Location(42, -120.5), 
         mapTypeId: Microsoft.Maps.MapTypeId.road, 
         zoom: 4 
        }); 

     // Specify InfoBoxOptions 
     var infoboxOptions = { 
      showPointer: false, 
      showCloseButton: false, 
      width: 500, height: 700, 
      title: 'Results', 
      offset: new Microsoft.Maps.Point(-900, -400), 
      htmlContent: '<div style="background-color:red; width:500px; height:700px;"></div>', 
      visible: true 
     }; 

     var defaultInfobox = new Microsoft.Maps.Infobox(map.getCenter(), infoboxOptions); 
     map.entities.push(defaultInfobox); 

     defaultInfobox.setHtmlContent('<div style="background-color:red; min-width:500px; min-height:700px;"></div>'); 
    } 

    getMap(); 

}); 

Как добавить свой HTML в Информационный бюллетень? Я использовал фоновый цвет здесь, но идея в том, что я покажу пользовательский HTML, который может иметь несколько событий click.

Answer 1

У меня есть запись в блоге о том, как установить HTML клиента из infoboxes здесь: http://rbrundritt.wordpress.com/2011/11/08/simple-custom-infoboxes-in-bing-maps-v7/

Answer 2

Создание HTML отдельно работали:

var html = '<table class="table table-striped table-hover table-responsive">'; 
    html = html + '<thead>'; 
    html = html + '<tr>'; 
    html = html +  '<th>VIN</th>'; 
    html = html +  '<th>Location</th>'; 
    html = html +  '<th>Estimated Delivery</th>'; 
    html = html + '</tr>'; 
    html = html + '</thead>'; 
    html = html + '<tbody>'; 
    html = html + '<tr>'; 
    html = html +  '<td>XYZ</td>'; 
    html = html +  '<td>(40, -120.5)</td>'; 
    html = html +  '<td>9/25</td>'; 
    html = html + '</tr>'; 
    html = html + '</tbody>'; 
    html = html +'</table>'; 

    var popupHtml = '<div style="background-color:whitesmoke; min-width:480px; min-height:680px;">{content}</div>'; 

Тогда мы можем просто указать:

defaultInfobox.setHtmlContent(popupHtml.replace('{content}', html));