javascript - Bing map 的信息框

我目前正在开发一个 bing map 应用程序，当用户单击图钉时，我似乎无法显示信息框。我一直在关注 SDK，它应该几乎完全相同。这是我所拥有的:

// ***********************************
// Function creates a single pin
// and returns a reference to the pin

function createMapPin(latLong, sName) {
    var pinImg = "imagespins/Good.png";


var pin = new Microsoft.Maps.Pushpin(latLong, {
    icon: pinImg,
    anchor: new Microsoft.Maps.Point(8, 8),
    draggable: true,
    width: 48,
    height: 48
});

pin.title = sName;


pinInfobox = new Microsoft.Maps.Infobox(pin.getLocation(),
            { title: 'My Pushpin',
                description: 'This pushpin is located at (0,0).',
                visible: false,
                offset: new Microsoft.Maps.Point(0, 15)
            });



// Add handlers for the pushpin events
   Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);
// Hide the infobox when the map is moved.
Microsoft.Maps.Events.addHandler(map, 'viewchange', hideInfobox);

map.entities.push(pin);
map.entities.push(pinInfobox);

    return pin;
}

function displayInfobox(e) {
    pinInfobox.setOptions({ visible: true });
}


function hideInfobox(e) {
    pinInfobox.setOptions({ visible: false });
}

引脚被成功创建并添加到 map 中，当用户单击引脚时，它确实进入了 dispayInfoBox 方法，但消息框似乎没有出现。

任何建议都非常感谢。谢谢!

最佳答案

你的代码有效，我试过了，只要你只调用 createMapPin() 一次。但是根据您的代码判断，您的意图是多次调用 createMapPin()，这将导致 infobox 停止像您认为的那样运行。原因是这一行:

pinInfobox = new Microsoft.Maps.Infobox(pin.getLocation(),
            { title: 'My Pushpin',
                description: 'This pushpin is located at (0,0).',
                visible: false,
                offset: new Microsoft.Maps.Point(0, 15)
            });

由于您没有通过 pinInfobox 关键字将 var 声明为局部变量，因此它隐式地被声明为全局变量。我不认为这是您的意图，因为一旦您再次调用 createMapPin() ， pinInfobox 就会被覆盖，因为它是一个全局变量。因此，实际上，即使您不断创建新的信息框，它也只有一个实例，并且它只是不断地获得分配的新值。因此，如果您单击图钉，一个信息框可能会在屏幕外某处弹出而您看不到它。我相信您的意图是让每个图钉关联一个信息框？为此，您需要将信息框声明为局部变量，如下所示:

var pinInfobox = new Microsoft.Maps.Infobox(pin.getLocation(),
        { title: 'My Pushpin',
            description: 'This pushpin is located at (0,0).',
            visible: false,
            offset: new Microsoft.Maps.Point(0, 15)
        });

您还需要修改事件处理程序以与信息框对象的本地版本交互，而不仅仅是单个全局变量。最简单的方法是将事件处理程序声明为 createMapPin() 函数范围内的匿名函数，并使用函数绑定(bind)覆盖 this 关键字的含义:

Microsoft.Maps.Events.addHandler(pin, 'click', function (e) {
    this.setOptions({ visible: true });
} .bind(pinInfobox));
Microsoft.Maps.Events.addHandler(map, 'viewchange', function(e) {
    this.setOptions({ visible: false });
}.bind(pinInfobox));

所以这是你更新的代码:

function createMapPin(latLong, sName) {
    var pinImg = "imagespins/Good.png";

    var pin = new Microsoft.Maps.Pushpin(latLong, {
        icon: pinImg,
        anchor: new Microsoft.Maps.Point(8, 8),
        draggable: true,
        width: 48,
        height: 48
    });

    pin.title = sName;

    var pinInfobox = new Microsoft.Maps.Infobox(pin.getLocation(),
        {
            title: 'My Pushpin',
            description: 'This pushpin is located at (0,0).',
            visible: false,
            offset: new Microsoft.Maps.Point(0, 15)
        });

    // Add handlers for the pushpin events
    Microsoft.Maps.Events.addHandler(pin, 'click', function(e) {
        this.setOptions({ visible: true });
    }.bind(pinInfobox));
    // Hide the infobox when the map is moved.
    Microsoft.Maps.Events.addHandler(map, 'viewchange', function(e) {
        this.setOptions({ visible: false });
    }.bind(pinInfobox));
    map.entities.push(pin);
    map.entities.push(pinInfobox);
    return pin;
}