6 votos

Cómo mostrar el mapa.InfoWindow fuera del mapa contenedor?

Necesito mostrar un infoWindow fuera del mapa (es decir, tienen que poseía el cuerpo del documento HTML, no el mapa div). Si me subclase InfoWindowBase puedo hacer esto por mí mismo, pero yo realmente no quiero hacer eso. Hay alguna manera de hacerlo?

He intentado sin éxito:-

     var infoWindow = new esri.dijit.InfoWindow({
      domNode: dojo.create("div", null, dojo.body())
    });
map.InfoWindow = infoWindow;

y mapa.infoWindow.lugar("", dojo.cuerpo());

gracias,

Phil

4voto

Tiberia Puntos 121

He utilizado dojo.lugar después de que una ventana de información se abre inicialmente (después de que el infoWindow se crea un nodo en el árbol DOM) para mover el mapa del contenedor primario.

//move the info window outside of the map container so it doesn't get cut off
dojo.place(dojo.byId("map_infowindow"), dojo.byId("uxRPMapContent"), "first");

...donde uxRPMapContent es un contenedor primario para el mapa de div. Esto sólo se mueve la ventana de información fuera del mapa - pero entonces todos los de la infoWindow del punto de anclaje de los cálculos.

*Tenga en cuenta que el contenedor primario debe tener un estilo que incluye position:relative , de modo que la posición absoluta infoWindow se colocará en relación a los padres, no en relación con el <body>.

Así que tenía que incluir una función en cuenta el nuevo offset. En mi caso:

function getInfoWindowOffset(screenPoint) {
//Given a point, find out the offset screen position and return
var od = dojo.position(dojo.byId("uxRPMapContent"), false); //parent
var om = dojo.position(dojo.byId("map"), false); //map

var dx = om.x - od.x;
var dy = od.y - om.y;

screenPoint.x = screenPoint.x + dx;
screenPoint.y = screenPoint.y + dy + 30;

return screenPoint;
}

En este caso, me estoy encontrando la diferencia entre el mapa y su contenedor primario, tanto en x como en y, y aplicar a una entrada de screenPoint.

Luego, cuando llega el momento de abrir la ventana (me estoy haciendo cuando una gráfica de la capa se hace clic), me pase de la pantalla de punto que suele ser usado para anclar la ventana de información en mi función personalizada para aplicar los desplazamientos:

var cpt = esri.geometry.toScreenGeometry(map.extent, map.width, map.height,e.graphic.geometry);
var nscpt = getInfoWindowOffset(cpt);
map.infoWindow.show(nscpt, map.getInfoWindowAnchor(nscpt));

(Con respecto a screenPoint.y + dy + 30 - 30 es un factor de elusión. Probablemente podría averiguar de dónde viene y que sea dinámico, pero...)

La última pieza en el que estoy trabajando es para ocultar el infoWindow si el usuario arrastra el ancla del infoWindow fuera de los límites de mapa (como lo es, el infoWindow permanece abierto y flota alrededor de la página si el usuario se desplaza demasiado lejos.)

1voto

Ignacio Puntos 2246

En caso de que alguien más tiene este problema,

dojo.ready(function() {
            dojo.style(dojo.byId("map"), {overflow: "visible" });           
            dojo.style(dojo.byId('map_root'), {overflow: 'visible' });          

});

1voto

Robert S. Puntos 15449

No estoy seguro de si tengo tu punto correctamente, pero lo que puedes hacer es ponerlo en, por ejemplo, un Panel de Contenido usando dojo.byId("Elemento HTML").innerHTML, una vez que ya han generado el contenido de la Ventana de Información.

Por ejemplo, como este:

<body>
    <div dojoType="dijit.layout.BorderContainer" style="width:100%; height:100%;margin:0;">
        <div dojoType="dijit.layout.ContentPane" region="right" style="width:300px; height:200px; overflow:auto;"
            <div id="your_html_element_outside_map"></div>
        </div>
    </div>
</body>

Y entonces, de generar el código HTML interno como un hilo común y agregarlo como este:

var your_HTML_content = "<b> Just an example </b>";
dojo.byId("your_html_element_outside_map").innerHTML = your_HTML_content;

Este debe reemplazar el vacío HTML div por el ejemplo que se cita.

i-Ciencias.com

I-Ciencias es una comunidad de estudiantes y amantes de la ciencia en la que puedes resolver tus problemas y dudas.
Puedes consultar las preguntas de otros usuarios, hacer tus propias preguntas o resolver las de los demás.

Powered by:

X