必应地图v8图钉工具提示
Bing Maps v8 pushpin tooltip
我开始将代码从Bing Maps AJAX v7 API迁移到新的v8,但有些事情已经改变了。我现有的向图钉添加工具提示的代码已经不起作用了。有人解决过这个问题吗?
我想明白了。由于新控件是在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>');
};
相关文章:
- d3.js Chord图的动态工具提示
- Graphiti中是否有任何工具提示功能
- "工具提示"jQuery插件坏了
- 单元格的工具提示或标题不显示超过2000个字符
- d3.js用按钮更新条形图工具提示
- 使Intro.js工具提示响应
- 画布中绘制的矩形区域的弹出工具提示
- 使用CSS/JavaScript更改剑道图工具提示文本颜色
- 禁用NVD3 multiBarHorizontalChart中0值的工具提示
- 如何更改已显示的工具提示
- 如何访问高图表工具提示中的任何特定数据
- 如何在jQuery点击函数中添加并显示引导工具提示
- 我可以't使用jQuery更改工具提示引导程序的位置
- 语义UI中格式化的工具提示
- 柱状图上的Highcharts工具提示
- 引导工具提示用法,在搜索字段中
- 将工具提示添加到d3散点图中
- Highcharts工具提示不显示corrosconding文本值,而是显示'未定义'
- 工具提示在带有两个图表的d3.js中消失
- 必应地图v8图钉工具提示