Javascript Bing地图v8图钉工具提示

我开始将我的代码从Bing Maps AJAX v7 API迁移到新的v8，但是有些事情已经改变了。我现有的向图钉添加工具提示的代码不再有效。有人解决过这个问题吗？

我想出来了。由于新控件是在html5画布中绘制的，因此无法通过正常方式访问这些控件。但是我使用infobox控件来模拟工具提示。代码：

html

javascript:

function getMap() {
   PanningRectLimit = Microsoft.Maps.LocationRect.fromCorners(new Microsoft.Maps.Location(30.181359, -95.662621), new Microsoft.Maps.Location(29.603220, -95.077050));

   MapOptions = {
    credentials: "yourkey", center: new Microsoft.Maps.Location(29.871261, -95.364891), showLocateMeButton: false, maxBounds: PanningRectLimit,
    mapTypeId: Microsoft.Maps.MapTypeId.road, zoom: 9, enableClickableLogo: false, tileBuffer: 2, showMapTypeSelector: false, useInertia: false, enableSearchLogo: false, disableKeyboardInput: true
};

   map = new Microsoft.Maps.Map(document.getElementById("MapPlace"), MapOptions);

   LayerOffices = new Microsoft.Maps.Layer({ visible: true, zIndex: 2 });
   infobox = new Microsoft.Maps.Infobox(LastValidLocation, { description: 'description', showCloseButton: false, showPointer: false });

   var off1 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(mylat, mylng), { typeName: 'Office1', enableHoverStyle: true });
   var off2 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(mylat2, mylng2), { typeName: 'Office2', enableHoverStyle: true });

   Microsoft.Maps.Events.addHandler(off1 , 'mouseover', tooltipPin);
   Microsoft.Maps.Events.addHandler(off2 , 'mouseover', tooltipPin);
   Microsoft.Maps.Events.addHandler(off1 , 'mouseout', tooltipPin2);
   Microsoft.Maps.Events.addHandler(off2 , 'mouseout', tooltipPin2);

   LayerOffices.add(off1);
   LayerOffices.add(off2);

   map.layers.insert(LayerOffices);
}


function tooltipPin(e) {
   var loc = e.target.getLocation();
   infobox.setMap(map);
   infobox.setLocation(loc);
   infobox.setHtmlContent('<div id="infoboxText" style="background-color:White; border-style:solid; border-width:medium; border-color:DarkOrange; min-height:40px; width: 150px; "><p id="infoboxDescription" style="position: absolute; top: 10px; left: 10px; width: 220px; ">mydescription</p></div>');
};


function tooltipPin2(e) {
   infobox.setHtmlContent('<div></div>');
};

函数getMap（）{ PanningRectLimit=Microsoft.Maps.LocationRect.fromCorners（新的Microsoft.Maps.Location（30.181359，-95.662621），新的Microsoft.Maps.Location（29.603220，-95.077050））； 映射选项={ 凭证：“yourkey”，中心：新建Microsoft.Maps.Location（29.871261，-95.364891），showLocateMeButton:false，maxBounds:PanningRectLimit， mapTypeId:Microsoft.Maps.mapTypeId.road，缩放：9，启用ClickableLogo:false，tileBuffer:2，showMapTypeSelector:false，useInertia:false，启用SearchLogo:false，禁用键盘输入：true }; map=新的Microsoft.Maps.map（document.getElementById（“MapPlace”）、MapOptions； LayerOffices=new Microsoft.Maps.Layer（{visible:true，zIndex:2}）； infobox=new Microsoft.Maps.infobox（LastValidLocation，{description:'description'，showCloseButton:false，showPointer:false}）； var off1=new Microsoft.Maps.Pushpin（new Microsoft.Maps.Location（mylat，mylng），{typeName:'Office1'，enableHoverStyle:true}）； var off2=new Microsoft.Maps.Pushpin（new Microsoft.Maps.Location（mylat2，mylng2），{typeName:'Office2'，enableHoverStyle:true}）； Microsoft.Maps.Events.addHandler（off1，'mouseover'，tooltipPin）； Microsoft.Maps.Events.addHandler（off2，'mouseover'，tooltipPin）； Microsoft.Maps.Events.addHandler（off1，'mouseout'，tooltipPin2）； Microsoft.Maps.Events.addHandler（off2，'mouseout'，tooltipPin2）； 添加图层功能（off1）； 增加图层功能（off2）； map.layers.insert（LayerOffices）； } 函数工具提示（e）{ var loc=e.target.getLocation（）； infobox.setMap（map）； 信息框。设置位置（loc）； infobox.setHtmlContent（“

mydescription

”； }; 函数tooltipPin2（e）{ infobox.setHtmlContent（“”）； };

---

感谢BernieSF，在添加了一些被忽略的变量声明后，我能够使您的代码正常工作，即，`var LastValidLocation=new Microsoft.Maps.Location（29.603220，-95.077050）；var mylat=29.871261；var mylng=-95.364891；var mylat2=29.71261；var mylng2=-95.64891；这绝对是个小问题，你的技术非常有用

function getMap() {
   PanningRectLimit = Microsoft.Maps.LocationRect.fromCorners(new Microsoft.Maps.Location(30.181359, -95.662621), new Microsoft.Maps.Location(29.603220, -95.077050));

   MapOptions = {
    credentials: "yourkey", center: new Microsoft.Maps.Location(29.871261, -95.364891), showLocateMeButton: false, maxBounds: PanningRectLimit,
    mapTypeId: Microsoft.Maps.MapTypeId.road, zoom: 9, enableClickableLogo: false, tileBuffer: 2, showMapTypeSelector: false, useInertia: false, enableSearchLogo: false, disableKeyboardInput: true
};

   map = new Microsoft.Maps.Map(document.getElementById("MapPlace"), MapOptions);

   LayerOffices = new Microsoft.Maps.Layer({ visible: true, zIndex: 2 });
   infobox = new Microsoft.Maps.Infobox(LastValidLocation, { description: 'description', showCloseButton: false, showPointer: false });

   var off1 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(mylat, mylng), { typeName: 'Office1', enableHoverStyle: true });
   var off2 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(mylat2, mylng2), { typeName: 'Office2', enableHoverStyle: true });

   Microsoft.Maps.Events.addHandler(off1 , 'mouseover', tooltipPin);
   Microsoft.Maps.Events.addHandler(off2 , 'mouseover', tooltipPin);
   Microsoft.Maps.Events.addHandler(off1 , 'mouseout', tooltipPin2);
   Microsoft.Maps.Events.addHandler(off2 , 'mouseout', tooltipPin2);

   LayerOffices.add(off1);
   LayerOffices.add(off2);

   map.layers.insert(LayerOffices);
}


function tooltipPin(e) {
   var loc = e.target.getLocation();
   infobox.setMap(map);
   infobox.setLocation(loc);
   infobox.setHtmlContent('<div id="infoboxText" style="background-color:White; border-style:solid; border-width:medium; border-color:DarkOrange; min-height:40px; width: 150px; "><p id="infoboxDescription" style="position: absolute; top: 10px; left: 10px; width: 220px; ">mydescription</p></div>');
};


function tooltipPin2(e) {
   infobox.setHtmlContent('<div></div>');
};