当前位置: 动力学知识库 > 问答 > 编程问答 >

Bing Maps v8 pushpin tooltip

问题描述:

I'm starting to migrate my code from the Bing Maps AJAX v7 API to the new v8, but some things have changed. My existing code to add a tooltip to a pushpin doesn't work anymore. Anyone have tackled this problem?

网友答案:

I figured out. Since the new control is drawn inside a html5 canvas, the controls are not accessible by normal means. But I used the infobox control to mimic a tooltip. code:

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>');
};
分享给朋友:
您可能感兴趣的文章:
随机阅读: