Dojo / Dijit TooltipDialog.open：如何覆盖offsetHeight和offsetTop值

Question

目前，我尝试使用ESRI ArcGIS地图环境实现/解决问题，在该环境中，我有一个多层地图，并且每层都呈现自定义图形。 一些图形是简单的形状，例如直线和圆形，但是大多数图形是在图层上绘制的图标（.png）文件。 （所有这些工作都是在JavaScript中完成的。）

我已经能够正确生成所有图层-数据未存储在ArcGIS地图中，但是Web应用程序中的自定义设计的联系与位置数据库（SQL）和其他表单维护了此C＆L数据。

在地图上呈现的图形图标需要具有鼠标悬停的工具提示弹出窗口，并带有在创建时随.substitute()命令将更新模板的信息存储在一起的信息。 显示的信息是以<div>格式的HTML格式的。
问题：
将鼠标移到图标上时，将显示tooltipDialog，但1）它始终出现在屏幕的右下角-尽管指定了“ orient：”和特定的“ x：”和“ y：”坐标。 此外，当执行tooltipDialog.open()命令时，对话框的offsetHeight设置为624，offsetTop设置为502。（ offsetWidth实际上设置为正确的值。）如何覆盖offsetHeight / offsetTop ？

我尝试为tooltipDialog.open()命令指定其他参数，但是到目前为止，没有任何尝试改变结果。 即使我将模板内容更改为“ Hi There！”一样简单。 不会改变结果。

注意：如果单击图标，则会弹出IconWindow对话框，并显示正确的内容和格式。 因此，这使我相信问题出在CSS或dojo / dijit的其他方面，因为tooltipDialog.open()命令实际上是在进行偏移更改的位置-保留了值（ offsetTop=0 offsetHeight=0 ）在open()调用之前。

想法/建议？

Answer 1

您可以尝试使用dijit/popup模块打开TooltipDialog ，这将允许您传入应该在其中打开工具提示的DOM节点：

popup.open({
    popup: myTooltipDialog,
    around: dom.byId('thenode') 
});

有这样一个完整的例子这里（旁边的“A TooltipDialog可从任何节点弹出。”）

Answer 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>

希望这对您有帮助：)

但是，如果您要查找确切的Fix，则始终建议在此处添加代码。

Answer 3

找到了我的情况的答案。 似乎没有说明的要求是使用提供的CSS dijit /主题之一，或者用户必须创建自己的主题，该主题具有一些CSS来配置显示位置。

通过消除对top：的任何样式引用，解决了offsetTop问题。

Dojo / Dijit TooltipDialog.open：如何覆盖offsetHeight和offsetTop值

问题描述

3 个解决方案

解决方案1
0 2016-10-20 07:53:23

解决方案2
0 2016-10-21 09:40:41

解决方案3
0 2016-11-04 17:04:43

Dojo / Dijit TooltipDialog.open：如何覆盖offsetHeight和offsetTop值

问题描述

3 个解决方案

解决方案1 0 2016-10-20 07:53:23

解决方案2 0 2016-10-21 09:40:41

解决方案3 0 2016-11-04 17:04:43

解决方案1
0 2016-10-20 07:53:23

解决方案2
0 2016-10-21 09:40:41

解决方案3
0 2016-11-04 17:04:43