Dojo/Dijit TooltipDialog.open：如何覆盖 offsetHeight 和 offsetTop 值
Posted
技术标签:
【中文标题】Dojo/Dijit TooltipDialog.open：如何覆盖 offsetHeight 和 offsetTop 值【英文标题】：Dojo/Dijit TooltipDialog.open: How to override offsetHeight and offsetTop values 【发布时间】：2016-10-19 18:14:17 【问题描述】：目前正在尝试实施/解决 ESRI ArcGIS 地图环境的问题，在该环境中，我有一个多层地图，每个图层都呈现自定义图形。一些图形是简单的形状，例如线条和圆形，但大多数图形是在图层上绘制的图标 (.png) 文件。 （所有这些都是在 javascript 中完成的。）
我已经能够正确生成所有图层 - 数据并未存储在 ArcGIS 地图中，而是自定义设计的联系人和位置数据库 (SQL) 以及 Web 应用程序中的其他表单维护此 C&L 数据。
在地图上呈现的图形图标需要出现一个鼠标悬停工具提示弹出窗口，其中包含在创建图标时与图标一起存储的信息，.substitute() 命令将更新模板。显示的信息是 html 格式的 <div>。
问题：
当鼠标移到图标上时，会出现 tooltipDialog 但 1) 它始终出现在屏幕的右下角 - 尽管指定了“orient:”和特定的“x:”和“y:”坐标。此外，当执行tooltipDialog.open() 命令时，对话框的offsetHeight 设置为624，offsetTop 设置为502。（offsetWidth 实际上设置为正确的值。）如何覆盖@ 987654326@/offsetTop?
我已尝试为tooltipDialog.open() 命令指定其他参数，但到目前为止没有任何尝试改变结果。即使我将模板内容更改为“您好！”这样简单。不会改变结果。
注意：如果我点击一个图标，IconWindow 对话框将弹出，并显示正确的内容和格式。所以它让我相信问题出在 CSS 或 dojo/dijit 的其他方面，因为tooltipDialog.open() 命令实际上是进行偏移更改的地方 - 在@987654332 之前保留值（offsetTop=0 offsetHeight=0） @调用。
想法/建议？
【问题讨论】：
请分享一些关于如何创建工具提示对话框以及如何显示它的代码。 您可以使用 css 定位元素。由于您提供了零代码，我们无法为您提供更多帮助。 你可以为它创建一个示例或 jsfiddle... 【参考方案1】：您可以尝试使用dijit/popup 模块打开TooltipDialog，这将允许您传入应该打开工具提示的DOM 节点：
popup.open(
popup: myTooltipDialog,
around: dom.byId('thenode')
);
这里有一个完整的例子here（在“A TooltipDialog may be pop up from any node.”旁边）
【讨论】：
看起来我遇到的问题是 dijit 在 innerHTML 中复制结束标签...工具提示有 8 个 标签，但有 15 个 标签...如何关闭自动更正或自动格式化？ 你能帮我解决这个问题吗***.com/questions/69642934/…我无法打开弹出窗口并在地图上的点标记上显示相应的自定义详细信息【参考方案2】：好吧，当您将鼠标悬停在地图上的任何要素上时，您似乎想显示带有一些偏移值的信息弹出窗口。
解决方案-
这样做我认为您不需要处理 TooltipDialog，因为每当您在地图上加载要素或要素图层时，您都可以将信息弹出窗口附加到它。它将负责整个加载和显示信息弹出对话框及其定位。
传递偏移值-
如果想将一些偏移值传递给弹出对话框，您可以使用下面提到的属性：-
有关弹出对话框的更多属性，请参阅此链接-https://developers.arcgis.com/javascript/3/jsapi/popup.html
悬停对话框示例-
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Feature Layer - display results as an InfoWindow onHover</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.18/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
<style>
html, body, #mapDiv
padding:0;
margin:0;
height:100%;
#mapDiv
position: relative;
#info
background: #fff;
box-shadow: 0 0 5px #888;
left: 1em;
padding: 0.5em;
position: absolute;
top: 1em;
z-index: 40;
</style>
<script src="https://js.arcgis.com/3.18/"></script>
<script>
var map, dialog;
require([
"esri/map", "esri/layers/FeatureLayer",
"esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol",
"esri/renderers/SimpleRenderer", "esri/graphic", "esri/lang",
"esri/Color", "dojo/number", "dojo/dom-style",
"dijit/TooltipDialog", "dijit/popup", "dojo/domReady!"
], function(
Map, FeatureLayer,
SimpleFillSymbol, SimpleLineSymbol,
SimpleRenderer, Graphic, esriLang,
Color, number, domStyle,
TooltipDialog, dijitPopup
)
map = new Map("mapDiv",
basemap: "streets",
center: [-80.94, 33.646],
zoom: 8,
slider: false
);
var southCarolinaCounties = new FeatureLayer("https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3",
mode: FeatureLayer.MODE_SNAPSHOT,
outFields: ["NAME", "POP2000", "POP2007", "POP00_SQMI", "POP07_SQMI"]
);
southCarolinaCounties.setDefinitionExpression("STATE_NAME = 'South Carolina'");
var symbol = new SimpleFillSymbol(
SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SOLID,
new Color([255,255,255,0.35]),
1
),
new Color([125,125,125,0.35])
);
southCarolinaCounties.setRenderer(new SimpleRenderer(symbol));
map.addLayer(southCarolinaCounties);
map.infoWindow.resize(245,125);
dialog = new TooltipDialog(
id: "tooltipDialog",
style: "position: absolute; width: 250px; font: normal normal normal 10pt Helvetica;z-index:100"
);
dialog.startup();
var highlightSymbol = new SimpleFillSymbol(
SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SOLID,
new Color([255,0,0]), 3
),
new Color([125,125,125,0.35])
);
//close the dialog when the mouse leaves the highlight graphic
map.on("load", function()
map.graphics.enableMouseEvents();
map.graphics.on("mouse-out", closeDialog);
);
//listen for when the onMouseOver event fires on the countiesGraphicsLayer
//when fired, create a new graphic with the geometry from the event.graphic and add it to the maps graphics layer
southCarolinaCounties.on("mouse-over", function(evt)
var t = "<b>$NAME</b><hr><b>2000 Population: </b>$POP2000:NumberFormat<br>"
+ "<b>2000 Population per Sq. Mi.: </b>$POP00_SQMI:NumberFormat<br>"
+ "<b>2007 Population: </b>$POP2007:NumberFormat<br>"
+ "<b>2007 Population per Sq. Mi.: </b>$POP07_SQMI:NumberFormat";
var content = esriLang.substitute(evt.graphic.attributes,t);
var highlightGraphic = new Graphic(evt.graphic.geometry,highlightSymbol);
map.graphics.add(highlightGraphic);
dialog.setContent(content);
domStyle.set(dialog.domNode, "opacity", 0.85);
dijitPopup.open(
popup: dialog,
x: evt.pageX,
y: evt.pageY
);
);
function closeDialog()
map.graphics.clear();
dijitPopup.close(dialog);
);
</script>
</head>
<body class="tundra">
<div id="mapDiv">
<div id="info">
Hover over a county in South Carolina to get more information.
</div>
</div>
</body>
</html>希望这会对您有所帮助:)
但是，如果您正在寻找确切的修复程序，它始终建议您在此处添加您的代码。
【讨论】：
明白了——这并不像剪切和粘贴代码那么简单。 是的..有时会发生..希望以上答案能给您一些提示... 而不是整个代码.. 只是小的 sn-ps 也可能会导致回答者的确切问题或提示...... 明白。代码或 sn-p 必须重新输入，并且可能导致语法错误，因为该项目正在处理的测试网络没有互联网连接。 （一直试图在这个问题上与 ESRI 合作，但收效甚微......升级到他们的 3.18 JS API，但问题仍然存在。不确定 JQuery 或 Site.Master 是否干扰了 tooltipDialog 的显示——对话框似乎是将绘图点引用为地图的左下角 - 尽管 X/Y 坐标在调试器中显示正常。【参考方案3】：找到了我的情况的答案。似乎有一个未说明的要求，即使用提供的 CSS dijit/主题之一，或者用户必须创建自己的主题，该主题具有一些配置显示位置的 CSS。
通过消除对 top 的任何样式引用解决了 offsetTop 问题：。
【讨论】：
以上是关于Dojo/Dijit TooltipDialog.open：如何覆盖 offsetHeight 和 offsetTop 值的主要内容，如果未能解决你的问题，请参考以下文章
最佳实践 - 将 dojo/dijit 升级到 dojo2 应用程序