如何使用Bing Maps 6.3 Ajax Control添加自定义按钮进行映射?

时间:2013-02-07 17:56:50

标签: javascript ajax bing-maps

有没有办法将自定义按钮添加到Bing地图?像自定义仪表板,我想要做的是有一些按钮来切换信息/颜色/等。按下地图上显示的按钮,以某些图钉/多边形显示。

有没有办法在地图上添加自定义按钮?或者我是否必须在地图外添加按钮?任何帮助将不胜感激。

1 个答案:

答案 0 :(得分: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元素来实现。 请参阅Chris的博文: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);