Javascript Bing地图的信息框
我目前正在使用bing地图应用程序,当用户点击pin时,我似乎无法显示信息框。我一直在关注SDK,它应该几乎完全相同。以下是我所拥有的:Javascript Bing地图的信息框,javascript,web-applications,bing-maps,Javascript,Web Applications,Bing Maps,我目前正在使用bing地图应用程序,当用户点击pin时,我似乎无法显示信息框。我一直在关注SDK,它应该几乎完全相同。以下是我所拥有的: // *********************************** // Function creates a single pin // and returns a reference to the pin function createMapPin(latLong, sName) { var pinImg = "imagespins/G
// ***********************************
// 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 });
}
pin成功创建并添加到地图中,当用户单击pin时,它会进入dispayinfox方法,但messagebox似乎没有出现
任何建议都非常感谢。谢谢 只要您只调用
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)
});
由于您没有通过var
关键字将pinInfobox
声明为局部变量,因此隐式地将其声明为全局变量。我不认为这是您的意图,因为只要您再次调用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)
});
您还需要修改事件处理程序,以便与infobox对象的本地版本交互,而不仅仅是与单个全局变量交互。最简单的方法是在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;
}