I have the following code for Bing Maps in my website. It follows the examples given on http://www.bingmapsportal.com/isdk/ajaxv7#Infobox20 . But neither the htmlContent property in the infoboxOptions, nor the setHtmlContent() method seem to be adding the background color that I want for the Infobox. The Infobox itself renders properly. Other properties also seem to work.
$(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();
});
How do I add my HTML to the Infobox? I have used background color here but the idea is that I will show a custom HTML that might have several click events.
Creating the HTML separately worked:
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>';
Then, we can just specify:
defaultInfobox.setHtmlContent(popupHtml.replace('{content}', html));
我在此处发布了有关如何设置信息框的客户HTML的博客文章: http ://rbrundritt.wordpress.com/2011/11/08/simple-custom-infoboxes-in-bing-maps-v7/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.