0

Web サイトに Bing Maps の次のコードがあります。http://www.bingmapsportal.com/isdk/ajaxv7#Infobox20に示されている例に従います。しかし、infoboxOptions の htmlContent プロパティも 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 を Infobox に追加するにはどうすればよいですか? ここでは背景色を使用しましたが、いくつかのクリック イベントを持つ可能性のあるカスタム HTML を表示するという考えです。

4

2 に答える 2

0

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));
于 2014-09-16T17:12:22.200 に答える
0

ここにインフォボックスの顧客 HTML を設定する方法に関するブログ投稿があります: http://rbundritt.wordpress.com/2011/11/08/simple-custom-infoboxes-in-bing-maps-v7/

于 2014-09-17T08:41:14.843 に答える