简体   繁体   中英

Openlayers and Jquery autocomplete to open popup from vector layer

I'm developing a map on-line using Openlayers. ON that map I have a Vector layer showing restaurants. Each restaurant is represented by an icon which can be click to open a popup in order to display more info. So far so good. But I want to implement an Autocomplete search in Jquery. So What i want to do is when you select a restaurant name in the autocomplete i would like the map to open the corresponding popup (trigger the popup plus center the map and zoom). I manage to center the map but I cannot figure out for the popup openning.

Here the code i'm using for Autocomplete:

$(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");
        }

});});

And that is my Vector layer:

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,
        });

Does anyone got an idea how to call the popup in the Jquery function? Or maybe what i'm trying to do is impossible?

After long weeks of banging my head on the desk I finally found an answer by myself.

If you are interested see below:

First on the input for your autocomplete add an "onchange="yourfunction()"

 <input type="text" id="searchresto" onchange="yourfunction(this)"/>

Then in you openlayer:

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);
    }

And finally just call yourfunction in you autocomplete

$(function() {
$( "#searchresto" ).catcomplete({
    delay: 0,
    source: "select_resto.php",
     select: yourfunction 

});});

Done!!!! Anyway thx for not answering I really develop my Javascript skill!!! :) I hope this will help someone!!!

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM