javascript - Bing Maps 6.3 Ajax Control を使用してマップにカスタム ボタンを追加するにはどうすればよいですか?

Question

カスタム ボタンを Bing マップに追加する方法はありますか? カスタム ダッシュボードのようなもので、これでやりたいことは、情報/色などを切り替えるためのボタンをいくつか用意することです。マップ上に表示されたボタンを押すことで、特定のピン/ポリゴンに表示されます。

カスタム ボタンをマップに追加する方法はありますか? または、マップの外にボタンを追加する必要がありますか? どんな助けでも大歓迎です。

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);
}

もう 1 つの方法は、ダッシュボードの対応する 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);