Bing地图的信息框
问题描述:
我目前正在研究bing地图应用程序,并且当用户单击该图钉时我似乎无法获取信息框。我一直在关注SDK,它应该几乎完全一样。继承人我有什么:Bing地图的信息框
// ***********************************
// 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 });
}
的引脚都创建并添加到地图中成功当用户点击引脚上它进入dispayInfoBox方法,但在MessageBox只是似乎没有出现。
任何建议都非常appreactiate。谢谢!
答
你的代码有效,我试过了,只要你只拨打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()
功能范围的事件处理程序为匿名函数,并重写这个关键字使用功能的意义结合:
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;
}
谢谢你完美地解决了我的问题,谢谢! – Johnston 2012-04-07 01:39:26