Bing地图的信息框

Question

我目前正在研究bing地图应用程序，并且当用户单击该图钉时我似乎无法获取信息框。我一直在关注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 }); 
} 

的引脚都创建并添加到地图中成功当用户点击引脚上它进入dispayInfoBox方法，但在MessageBox只是似乎没有出现。

任何建议都非常appreactiate。谢谢！

Answer 1

你的代码有效，我试过了，只要你只拨打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; 
}