openLayer: obtener coordenadas

Dany_s · #1 (**permalink**) 25/01/2010, 19:02

Hola, estoy tratando de entender un poco openlayer para hacer un visor y tengo el siguiente código que lo que intento hacer es que simplemente haga un alert con las cordenadas donde se hizo click pero al parecer las coordenas no son correctas, alguien me puede decir porqué? o es otro formato?

Código HTML:

<html>
<head>
	<title>OpenStreetMap</title>
	<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
	<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
	<script type="text/javascript">

        var lon = -55.9190338;
        var lat = -27.3796717;
        var zoom=13;
        var map;
        function init() {
            map = new OpenLayers.Map('map');
            layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
            map.addLayer(layerMapnik);
            map.zoomToMaxExtent();
            var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
            map.setCenter (lonLat, zoom);

            map.events.register("click", map, function(e) {
                var lonlat = map.getLonLatFromViewPortPx(e.xy);
                alert(lonlat.lat + " - " +lonlat.lon);
            });
        }
	</script>

</head>
<body onload="init();">
	<div style="width:50%; height:70%" id="map"></div>
        <div id="asd"></div>
</body>
</html>

en este ejemplo las coordenadas son correctas
http://openlayers.org/dev/examples/click.html

ceSharp · #2 (**permalink**) 26/01/2010, 02:13

Hola Dany,

no he visto nunca el openLayers ese que comentas, pero si quieres obtener la posición del cursor puedes usar window.event.offsetX y window.event.offsetY y te devolverá las coordenadas x e y del cursor.

salu2

Dany_s · #3 (**permalink**) 26/01/2010, 04:33

es una biblioteca javascript para manejar servicios de mapas web

necesito recuperar la longitud y latitud

Dany_s · #4 (**permalink**) 26/01/2010, 05:34

ya lo arregle, cambié el código de proyección de EPSG:900913 a EPSG:4326

jhonnybmx · #5 (**permalink**) 30/03/2010, 06:39

Como puedo arrastrar con el mouse este marker por el mapa... HELP ME

Código Javascript:

Ver original<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mapa</title>
 
 
<script type="text/javascript">
var estado;
</script>
 
 
<href="http://www.openlayers.org/api/theme/default/style.css" rel="stylesheet" type="text/css">
 
 
<script type="text/javascript">
 
</script>
<style type="text/css">
#map {
width: 1024px;
height: 600px;
 
}
 
</style>
 
 
 
 
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAKFodoFaBZaU8 L0Mhu_fIzRSrxPxopuoSrb5BI6peR2a09rRn8RRnu6DuAoT0ns Xlprymp7eddPoJtg"></script>
 
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
 
 
 
<script type="text/javascript">
var ZoomLevels = 18;
var bounds = new OpenLayers.Bounds(-81.7358169555665, -4.23687362670895, -66.8704528808595, 12.5947074890135);
var boundsToExtent = new OpenLayers.Bounds(-180, -90, 180, 90);
var format = 'image/png';
var zoom = 1;
var map, controls, texto_capa;
 
var layer;
 
 
 
var MapOptions = {
controls: [],
maxResolution: 0.17578125,
numZoomLevels: ZoomLevels,
projection: new OpenLayers.Projection('EPSG:4326'),
maxExtent: boundsToExtent
 
 
 
};
 
var OvOptions = {
maxExtent: bounds,
projection: new OpenLayers.Projection('EPSG:4326'),
resolutions:[
0.17578125,
0.087890625,
0.0439453125,
0.02197265625,
0.010986328125,
0.0054931640625,
0.00274658203125,
0.001373291015625,
0.0006866455078125,
0.00034332275390625,
0.000171661376953125,
0.0000858306884765625,
0.00004291534423828125,
0.000021457672119140625,
0.0000107288360595703125,
0.00000536441802978515625,
0.000002682209014892578125,
0.0000013411045074462890625
]
};
 
 
 
 
 
function init() {
 
map = new OpenLayers.Map(document.getElementById('map'), MapOptions)
 
 
width = map.clientWidth;
MapOptions.maxResolution = (MapOptions.maxExtent.right-MapOptions.maxExtent.left)/width;
 
ntb = new OpenLayers.Control.Navigation();
map.addControl(ntb);
 
pzb = new OpenLayers.Control.PanZoomBar({position: new OpenLayers.Pixel(1, 5)});
map.addControl(pzb);
 
atr = new OpenLayers.Control.Attribution();
map.addControl(atr);
 
lsw = new OpenLayers.Control.LayerSwitcher();
lsw.activeColor = "#99B3CC";
map.addControl(lsw);
lsw.maximizeControl();
 
 
nav = new OpenLayers.Control.NavigationHistory();
map.addControl(nav);
 
var controlOptions = {
mapOptions: OvOptions,
autoPan: true
}
 
 
loadControlOpenLayer();
 
 
var overview = new OpenLayers.Control.OverviewMap(controlOptions);
 
 
var gphy = new OpenLayers.Layer.Google(
"Google Physical",
{type: G_PHYSICAL_MAP}
);
var gmap = new OpenLayers.Layer.Google(
"Google Streets", // the default
{numZoomLevels: 20}
);
var ghyb = new OpenLayers.Layer.Google(
"Google Hybrid",
{type: G_HYBRID_MAP, numZoomLevels: 20}
);
var gsat = new OpenLayers.Layer.Google(
"Google Satellite",
{type: G_SATELLITE_MAP, numZoomLevels: 20}
);
 
 
map.addLayers([gphy, gmap, ghyb, gsat]);
 
 
map.setCenter(new OpenLayers.LonLat(-70.2, 6.9), 6);
 
 
loadControlOpenLayer();
 
 
 
pintar();
 
 
 
 
}//end in
 
 
 
 
function loadControlOpenLayer()
{
OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control,
{
'handleRightClicks': true, defaultHandlerOptions:
{
'single': true,
'double': false,
'pixelTolerance': 0,
'stopSingle': false,
'stopDouble': false
},
 
initialize: function(options)
{
this.handlerOptions = OpenLayers.Util.extend
(
{}, this.defaultHandlerOptions
);
OpenLayers.Control.prototype.initialize.apply
(
this, arguments
);
this.handler = new OpenLayers.Handler.Click(
this, {
'click': this.onClick,
'dblclick': this.onDblclick,
'rightclick':this.onRightClick
}, this.handlerOptions
);
},
onClick: function(evt) {
 
if(estado!=2){
pintar(evt);
 
if(estado==2){
 
}else{
estado=1;
}
}
//addPoint(lonlat.lon, lonlat.lat);
 
},
onRightClick: function(evt) {
/*
funcion para controlar el click derecho
*/
},
onDblclick: function(evt) {
 
},
trigger: function(e) {}
});
 
 
controls =
{
"single": new OpenLayers.Control.Click(
{
handlerOptions: {
"single": true,
"double": false
}
 
}),
 
"double": new OpenLayers.Control.Click({
handlerOptions: {
"single": false,
"double": true
}
}),
 
"both": new OpenLayers.Control.Click({
handlerOptions: {
"single": true,
"double": true
}
}),
 
"drag": new OpenLayers.Control.Click({
handlerOptions: {
"single": true,
"pixelTolerance": null
}
}),
 
"stopsingle": new OpenLayers.Control.Click({
handlerOptions: {
"single": true,
"stopSingle": true
}
}),
 
"stopdouble": new OpenLayers.Control.Click({
handlerOptions: {
"single": false,
"double": true,
"stopDouble": true
}
})
};
 
vectors = new OpenLayers.Layer.Vector("Vector Layer");
controls2 = {
point: new OpenLayers.Control.DrawFeature(vectors, OpenLayers.Handler.Point),
 
drag: new OpenLayers.Control.DragFeature(vectors)
};
 
 
for(var key2 in controls2) {
map.addControl(controls2[key2]);
}
 
for(var key in controls) {
controle = controls[key];
controle.key = key;
map.addControl(controle);
}
 
}
function pintar()
{
 
var markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);
 
var size = new OpenLayers.Size(32,32);
var offset = new OpenLayers.Pixel(-(size.w/2)+7, -size.h-2);
var icon = new OpenLayers.Icon('http://conap.gob.gt:7777/Conap/Members/ecancinos/plonelocalfolderng.2006-05-16.0529378581/InstalarProgs/Maps/skins/Maps/marker-blue.png',size,offset);
 
markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(-70,9),icon));
 
estado=2;
 
 
}
 
 
 
 
</script>
 
 
 
</head>
<Body onLoad="init()" >
 
<div id="map" class="smallmap" style="border:solid"></div>
 
 
</body>
</html>
    Editar/Borrar Mensaje