#1 Mon 24 March 2014 13:38
- drouchi
- Participant occasionnel
- Date d'inscription: 16 Jun 2010
- Messages: 32
Jquery Autocomplete et Openlayers
Bonjour a tous,
Je suis en train de développer une carte en ligne (postgreSQL, mapnik, openlayer). Sur cette carte j'ai une couche Vector avec des marqueurs. Les marqueurs sont actifs et ouvre une popup lorsque l'on clic dessus.
Dernièrement je dois développer un champs de recherche (jquery automplete widget). Je voudrai que lorsque un de mes marqueur est sélectionné dans le champs de recherche, celui ouvre la popup correspondante.
Voici le code de ma couche Vector:
var resto = new OpenLayers.Layer.Vector("GML", {
protocol: new OpenLayers.Protocol.HTTP({
url: "restaurant.php",
format: new OpenLayers.Format.GML(),
}),
strategies: [new OpenLayers.Strategy.Fixed()],
projection: map.displayProjection,
});
Voici le code de l'autocomplete (celui-ci permet de centrer la carte sur le marqueur choisi mais n'ouvre pas la popup correspondante :
$(function() {
$( "#searchresto" ).catcomplete({
delay: 0,
source: "select_resto.php",
select: function ( event, ui )
{ map.setCenter(
new OpenLayers.LonLat( ui.item.h_lon, ui.item.h_lat).transform(
new OpenLayers.Projection(Geo_pjt),
map.getProjectionObject()
), 5 );},
open: function () {
$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top");
},
close: function () {
$( this ).removeClass( "ui-corner-top").addClass("ui-corner-all");
}
});
});
Quelqu'un aurait-il quelque conseil sur la façon de procéder ou alors un bout de code 
Merci d'avance pour votre aide.
Drouchi
Hors ligne
#2 Tue 08 April 2014 17:31
- drouchi
- Participant occasionnel
- Date d'inscription: 16 Jun 2010
- Messages: 32
Re: Jquery Autocomplete et Openlayers
Bonjour,
Je viens finalement de trouver la réponse a ma question.
Merci de ne pas avoir repondu car je n'aurai pas pu m’améliorer en Javascript
Alors, il faut d'abord ajouter un onchange dans le input
Code:
<input type="text" id="searchresto" onchange="yourfunction(this)"/>
Ensuite pour l'openlayer:
Code:
function getFeatureByHid(featureHId) {
var feature = null;
var found = false;
for(var i=0, len=resto.features.length; i<len; ++i) {
if(resto.features[i].attributes.crID == featureHId) {
feature = resto.features[i];
found = true;
break;
}
}
return feature;
}
function SelectRestoByRestoId(crID)
{
var feature = getFeatureByHid(crID);
if (feature)
{
restoSelect.unselectAll();
restoSelect.select(feature);
}
return true;
}
function yourfunction(event,ui){
return SelectRestoByRestoId(ui.item.id);
}Et enfin il suffit d'ajouter votre fonction lors du select dans l'autocomplete jquery
Code:
$(function() {
$( "#searchresto" ).catcomplete({
delay: 0,
source: "select_resto.php",
select: yourfunction
});});Et voila!!!!
Dernière modification par drouchi (Tue 08 April 2014 17:32)
Hors ligne
