Dojo/Dijit TooltipDialog.open: как переопределить значения offsetHeight и offsetTop

В настоящее время пытается реализовать/решить проблему с картой ESRI ArcGIS, где у меня многоуровневая карта с настраиваемой графикой, отображаемой на каждом уровне. Некоторые из графических элементов - простые фигуры, такие как линии и круги, но большая часть графики - это файлы (.png), которые рисуются на слоях. (Все это делается в JavaScript.)Dojo/Dijit TooltipDialog.open: как переопределить значения offsetHeight и offsetTop

Мне удалось получить все слои, сгенерированные правильно - данные НЕ хранятся на картах ArcGIS, а специально спроектированы. Контактные данные & База данных местоположения (SQL) и другие формы в веб-приложении поддерживают данные C & L.

Графические иконки, которые отображаются на карте, должны иметь всплывающее всплывающее окно с подсказкой мыши с информацией, которая была сохранена с помощью значка при его создании, когда команда .substitute() обновит шаблон. Отображаемая информация представляет собой HTML-формат в формате <div>.
Задача:
Когда мышь перемещается по значку, появляется подсказка с диалогию, но 1) она всегда появляется в правом нижнем углу экрана - несмотря на «ориентир» и конкретные координаты «x:» и «y:» указывается. Кроме того, когда выполняется команда tooltipDialog.open(), значение offsetHeight диалогового окна установлено на 624, а значение offsetTop установлено равным 502. (offsetWidth действительно установлено на правильное значение.) Как переопределить либо/оба значения offsetHeight/?

Я попытался указать дополнительные параметры команде tooltipDialog.open(), но ничего не было сделано до сих пор, изменило исход. Даже когда я изменяю содержимое шаблона так же просто, как «Привет!» не меняет результат.

Примечание: Если я нажму на значок, появится диалоговое окно IconWindow с соответствующим отображением содержимого и форматирования. Поэтому мне кажется, что проблема связана с CSS или каким-либо другим аспектом dojo/dijit, поскольку команда tooltipDialog.open() на самом деле там, где происходят изменения смещения - значения сохраняются (offsetTop=0 offsetHeight=0) до вызова open().

Рекомендации/Рекомендации?

источник

2016-10-19 J. Putnam

Пожалуйста, поделитесь некоторым кодом о том, как вы создаете диалог всплывающей подсказки и как вы его показываете. –

Вы можете позиционировать элементы, используя css. Поскольку вы предоставили нулевой код, мы не можем вам помочь. – tcooc

вы можете создать образец или jsfiddle для него ... –

Вы можете попробовать использовать dijit/popup модуль, чтобы открыть TooltipDialog, что позволит вам пройти в узле DOM, вокруг которого должна быть открыта подсказка:

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

Там полный пример этого here (рядом с «A TooltipDialog может быть выведен из любого узла.»)

источник

2016-10-20 07:53:23 Corina

Похоже, проблема заключается в том, что dijit дублирует закрывающие теги для внутреннегоHTML ... В подсказке есть 8

tags but 15

теги ... есть способ превратить автоматическое или автоматическое форматирование? –

Ну, похоже, вы хотите отображать всплывающее окно с некоторым значением смещения всякий раз, когда вы наводите курсор на любую функцию на карте.

решение-

Ну что делать, так что я не думаю, что вам придется иметь дело с 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>

Надеясь это поможет :)

Однако его всегда рекомендуется, чтобы добавить свой код здесь, если вы ищете для точного Фикса.

источник

2016-10-21 09:40:41

Понял - это не так просто, как вырезать и вставить код. –

Да .. Иногда это происходит .. Надеясь на ответ выше, дайте несколько подсказок ... –

Вместо всего кода .. Просто небольшие фрагменты могут также привести к точной проблеме или подсказке для человека, который отвечает ... –

Найден ответ на мою ситуацию. Существует то, что, как представляется, является неустановленным требованием использовать либо один из предоставленных CSS-диджитов/тем, либо пользователь должен создать свою собственную тему, которая имеет некоторый CSS, который настраивает местоположение отображения.

Проблема offsetTop была решена путем устранения ссылок на любые ссылки на вершину :.

источник

2016-11-04 17:04:43

Dojo/Dijit TooltipDialog.open: как переопределить значения offsetHeight и offsetTop

ответ

Смежные вопросы