Nous utilisons des cookies pour vous garantir la meilleure expérience sur notre site. Si vous continuez à utiliser ce dernier, nous considèrerons que vous acceptez l'utilisation des cookies. J'ai compris ! ou En savoir plus !.
banniere

Le portail francophone de la géomatique


Toujours pas inscrit ? Mot de passe oublié ?
Nom d'utilisateur    Mot de passe              Toujours pas inscrit ?   Mot de passe oublié ?

Annonce

#1 Tue 26 July 2016 09:42

squallblanc
Juste Inscrit !
Date d'inscription: 26 Jul 2016
Messages: 1

openlayer et evenement onclick

Bonjour,

Je suis en train de développer une petite application de localisation d'antenne et je suis en total galére avec les éventements onclick....

En fait j'affiche une carte avec openlayer 2 et voudrai que lorsque l'on clic sur un point de la carte qu'une div s'ouvre est qu'elle affiche la latitude et la longitude dans un input.

Aujourd'hui j'ai 2 problèmes:
le premier, lorsque je clic sur ma carte la div s'affiche bien, mais si je clic une 2éme fois elle disparait....
Je souhaiterai que reste affiché temps que le formulaire quelle va contenir n'est pas valider ou si possible la fermer en cliquant sur une croix.

Mon 2éme problème est que je ne parviens pas à transmettre la latitude et la longitude dans mon input...

Voici mon code :

Code:

    
    MousePosition Control

 
html {
  height: 100%;
}
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.bouton
{
    color:#0000ff;
    font-size:24px;
    cursor:pointer;
}
.bouton:hover
{
    text-decoration:underline;
}
.texte
{
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
    height: 100%;
    overflow-y: hidden !important;
    padding: 30px;
    position: absolute;
    right: 0;
    transition: right 0.6s ease 0s;
    width: 25%;
    z-index: 18;
}

    
        var map;
        function init(){
            var map = new OpenLayers.Map('map');
            var proj4326 = new OpenLayers.Projection("EPSG:4326");
            var projmerc = new OpenLayers.Projection("EPSG:900913");
      map.addLayer(new OpenLayers.Layer.OSM());
            var layerOSM = new OpenLayers.Layer.OSM("Street Map");

      //epsg4326 =  new OpenLayers.Projection("EPSG:4326"); //WGS 1984 projection
      //projectTo = map.getProjectionObject(); //The map projection (Spherical Mercator)

      var lonLat = new OpenLayers.LonLat( 6.8627090,47.6382612 ).transform(proj4326, projmerc);
      
      var zoom=14;
      map.setCenter (lonLat, zoom);                
      
            map.addLayers([layerOSM]);
            if (!map.getCenter()) map.zoomToMaxExtent();
            map.events.register("mousemove", map, function(e) { 
                var lonlatTransf = lonlat.transform(map.getProjectionObject(), proj4326);
                OpenLayers.Util.getElement("lonlatTrans").innerHTML = 'lonlatTransf => '+lonlatTransf;
            });

            map.events.register("click", map, function(e) {
                var position = this.events.getMousePosition(e);
                var icon = new OpenLayers.Icon('img/picto/dome.png');   
                var lonlat = map.getLonLatFromPixel(position);
                var lonlatTransf = lonlat.transform(map.getProjectionObject(), proj4326);
                //alert ('lonlatTrans=> '+lonlatTransf.lat+','+lonlatTransf.lon);
                var lonlat = lonlatTransf.transform(proj4326, map.getProjectionObject());
                var markerslayer = new OpenLayers.Layer.Markers( "Markers" );
        var div = afficher('texte');    
        var info = myFunction('lonlatv');
                markerslayer.addMarker(new OpenLayers.Marker(lonlat, icon, div));        
                map.addLayer(markerslayer);
            });
            map.addControl(new OpenLayers.Control.LayerSwitcher());
        }
        
function afficher(id)
{
  if(document.getElementById(id).style.visibility=="hidden")
  {
    document.getElementById(id).style.visibility="visible";
  }
  else {
    document.getElementById(id).style.visibility="hidden";    
  }
  return true;
}

function cacher(id)
{
  if(document.getElementById(id).style.visibility=="visible")
  {
    document.getElementById(id).style.visibility="hidden";
  }
  return true;
}    

      
        Localisation
        
    
        Nom
        
    
        Type
        
       3G
       4G
        
    
        Marque
        
    
        Model
        

coordonnées

        
        //

je m'excuse par avance si mon code est mauvais, mais je débute en javascript....

Merci pour votre aide big_smile

Hors ligne

 

#2 Wed 27 July 2016 08:14

Laurent Jégou
Participant assidu
Lieu: Toulouse
Date d'inscription: 5 Sep 2005
Messages: 447
Site web

Re: openlayer et evenement onclick

Il serait peut-être plus simple d'utiliser les fonctions d'OL2 dédiées : http://dev.openlayers.org/docs/files/Op … re-js.html


Enseignant-Chercheur en Géomatique
UT2J - Dept Géo / CNRS UMR LISST-Cieu / Master Sigma - Revue Mappemonde

Hors ligne

 

Pied de page des forums

Powered by FluxBB