Bing Maps v8 pushpinツールチップ

Question

私のコードをBing Maps AJAX v7 APIから新しいv8に移行し始めましたが、いくつかの点が変更されました。ツールチップをピンに追加する既存のコードがもう機能しません。誰でもこの問題に取り組んできましたか？

Answer 1

私は考えました。新しいコントロールはhtml5キャンバス内に描画されるので、コントロールは通常の方法ではアクセスできません。しかし、私は、ツールチップを模倣するためにinfoboxコントロールを使用しました。コード：

HTML

<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=getMap' async defer></script> 

の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>'); 
};