javascript - 如何使用 Bing Maps 6.3 Ajax 控件向 map 添加自定义按钮？

Question

有没有办法向 Bing map 添加自定义按钮？像自定义仪表板之类的东西，我想要做的是有一些按钮来切换信息/颜色/等。通过按 map 上显示的按钮显示在某些图钉/多边形中。

有没有办法向 map 添加自定义按钮？或者我必须在 map 之外添加按钮吗？任何帮助将不胜感激。

Answer 1

您可以使用 VEMap 类上的专用方法 VEMap.AddControl()，请参阅: http://msdn.microsoft.com/en-us/library/bb412435.aspx

这是官方示例中有趣的部分:

function AddControl()
{
    var el = document.createElement("div"); 
    el.id = "myControl" + i; 
    el.style.top = 100 + (i * 10); 
    el.style.left = 100 + (i * 10);            
    el.style.border = "2px solid black";
    el.style.background = "White";
    el.innerHTML = el.id;  
    map.AddControl(el);
}

您可以使用的另一种方法是通过操作仪表板的相应 DOM 元素来完成此操作。请参阅克里斯的博客文章:http://pietschsoft.com/post/2010/12/18/Bing-Maps-Ajax-7-Add-Custom-Navigation-Bar-Buttons-using-jQuery.aspx

// Simple Method to Add a Custom Button to the NavBar using jQuery
var addNavButton = function (mapElement, content, onclick) {
    $(mapElement).find('.NavBar_typeButtonContainer').append(
        // Add a Separator between this button and any existing buttons
        $('<span>').addClass('NavBar_separator')
    ).append(
        // Add the Custom Button itself
        $('<a>').attr('href', '#').addClass('NavBar_button').
            append($('<span>').html(content).click(onclick))
    );
};
// Use setTimeout to load Custom NavBar button if you are adding
// the button immediatly after instantiating the map.
// Timeout is needed since Bing Maps 7 doesn't currently have
// any kind of "onload" event to handle.
window.setTimeout(function () {
    // Add Custom Button to NavBar
    addNavButton(
        document.getElementById('myMap'), // <- Maps DIV
        'Click Me', // <- Content of Button - You can put HTML in here if you want
        function () { // <- Method to call during buttons Click event
            alert('You Clicked Me!');
        }
    );
}, 100);