Openlayer 2+onclick sur plan

par **moogli** » 26 juil. 2016, 15:31

salut,

pour l'affiche de la div il faut enlever le else dans la fonction afficher. (qui masque si déjà affichée).

pour le reste, dans la callback de l'event click à la place de l'alerte tu affiches la chose dans la dic qui va bien !
[javascript]
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);
// #texte vs #lonlatTrans ? a toi de voir.
document.getElementById('lonlatTrans').innerHTML = 'Latitude: '+lonlatTransf.lat+' Longitude : '+lonlatTransf.lon+'';
//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);
});[/javascript]

Vu que tu charge jQuery tu peu l'utiliser plutôt que du "legacy" tu trouveras pas mal de chose pour t'auder à faire ce que tu souhaites plus simplement ou plus lisiblement.

@+

par **squallblanc** » 25 juil. 2016, 22:28

Bonjour,
je viens faire appel à vos connaissance en javascript.

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 :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" debug="true">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>MousePosition Control</title>
    <link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" type="text/css">
    <link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css" type="text/css">
    <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>

 <style type="text/css">
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;
}

</style>
    
    <script type="text/javascript">
        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;
}	

</script>
  </head>  

  <body onload="init()">
      <div id="texte" class="texte">
		<div>
        <label>Localisation</label>
        <div id="lonlatTrans"></div>
        <input type="text" value="" name="lonlatv">
        </div>
		<div>
        <label>Nom</label>
        <input type="text" value="" name="nom">
        </div>
		<div>
        <label>Type</label>
        <select name="type">
        	<option value="1">3G</option>
            <option value="2">4G</option>
        </select>
        </div>   
		<div>
        <label>Marque</label>
        <input type="text" value="" name="marque">
        </div>
		<div>
        <label>Model</label>
        <input type="text" value="" name="model">
        </div>
        </div>        
    </div>
  

<div id="tags">coordonnées</div>

    <div id="map" class="smallmap" style="width:500px;height:500px;"></div>

    <div id="lonlatTrans"></div><br/>

    <div id="lonlatDouble"></div>
        <script>
        //<!--
	        afficher('texte');
			cacher('texte');
        //-->			
        </script>
  </body>
</html>

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

Merci pour votre aide

Openlayer 2+onclick sur plan

Répondre

Étendre la vue Revue du sujet : Openlayer 2+onclick sur plan

Re: Openlayer 2+onclick sur plan

Openlayer 2+onclick sur plan