2 votos

Intentando establecer la posición del MouseOver de OpenLayers para que esté fuera del Mapa

Este es mi código y estoy tratando de obtener el MouseOver para que se muestre fuera del contenedor del Mapa.

<!DOCTYPE html>
<html>
    <head>
        <title>My Map</title>
        <link rel="stylesheet" href="openlayers/theme/default/style.css" type="text/css">
        <style>
            #map-id {
                width: 1024px;
                height: 512px;
            }
             #location {
                float: right;
            }
        </style>
        <script src="openlayers/lib/OpenLayers.js"></script>
    </head>
    <body>
        <h1>My Map</h1>
        <div id="map-id"></div>
        <script>
            var map = new OpenLayers.Map("map-id");
            var bio = new OpenLayers.Layer.WMS(
              "bio11",
              "http://localhost:8080/geoserver/iPlant/wms",
              {layers: 'iPlant:bio11'}
            );
            var imagery = new OpenLayers.Layer.WMS(
                "Global Imagery",
                "http://maps.opengeo.org/geowebcache/service/wms",
                {layers: "bluemarble"}
            );
            map.addLayers([imagery, bio]); //map.addLayers([untiled, tiled]);
            map.addControl(new OpenLayers.Control.LayerSwitcher());
            map.addControl(new OpenLayers.Control.MousePosition({element: $('location')}));
            map.zoomToMaxExtent();
        </script>
        <script>
            map.events.register("click", map , function(e){
            var latlon = map.getLonLatFromViewPortPx(e.xy) ;
            var lat = Math.round(latlon.lat);
            var lon = Math.round(latlon.lon);
            document.getElementById("location").innerHTML = "The Latitude is " + lat + " and the Longitude is " + lon;
            //window.location = "http://niles.iplantcollaborative.org/demo/geo/geo/iplantgeo_cgi.py?get=env&from=latlon&lat="+lat+"&lon="+lon;
            });

        </script>
        <div id="location">Position</div>
    </body>
</html>

Estoy utilizando el , las coordenadas del ratón sólo aparecen en la parte inferior derecha del mapa (dentro del contenedor del mapa).

1voto

texai Puntos 178

Creo que tu código funcionaría, cuando tu código principal estuviera en la etiqueta body del init...

si no, intenta cambiar:

var latlon = this.events.getMousePosition(e);
......
......
OpenLayers.Util.getElement("location").innerHTML = ....

y ponerlos todos init() que localizará en body ... puede consultar el código fuente de control de la posición del ratón ejemplo.

.

ACTUALIZACIÓN:

ok. perdón por la respuesta tardía, recién me di cuenta de que algo anda mal en el código anterior.

intente cambiar algo así, le dará el mismo resultado que OpenLayers.Control.MousePosition() dar:

map.events.register("mousemove", map, function(e) { 
    var position = this.events.getMousePosition(e);
    var latlon = map.getLonLatFromViewPortPx(e.xy) ;
    var lat = Math.round(latlon.lat);
    var lon = Math.round(latlon.lon);               
    OpenLayers.Util.getElement("coords").innerHTML = "The Latitude is " + lat +
        " and the Longitude is " + lon;
});

espero que te ayude....

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