Openlayers 和 Jquery 自动完成从矢量图层打开弹出窗口答案

【问题标题】：Openlayers and Jquery autocomplete to open popup from vector layerOpenlayers 和 Jquery 自动完成从矢量图层打开弹出窗口
【发布时间】：2014-04-08 23:30:26
【问题描述】：

我正在使用 Openlayers 在线开发地图。在那张地图上，我有一个矢量图层显示餐厅。每家餐厅都由一个图标表示，单击该图标可打开一个弹出窗口以显示更多信息。到目前为止，一切都很好。但我想在 Jquery 中实现自动完成搜索。所以我想要做的是当您在自动完成中选择餐厅名称时，我希望地图打开相应的弹出窗口（触发弹出窗口加上地图中心和缩放）。我设法使地图居中，但我无法确定弹出窗口的打开方式。

这里是我用于自动完成的代码：

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

});});

那是我的向量层：

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

有人知道如何在 Jquery 函数中调用弹出窗口吗？或者也许我想做的是不可能的？

【问题讨论】：

标签： javascript jquery autocomplete popup

【解决方案1】：

在桌子上敲了几个星期的头后，我终于自己找到了答案。

如果你有兴趣，请看下面：

首先在您的自动完成输入中添加“onchange="yourfunction()"

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

然后在你的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);
    }

最后只需在自动完成中调用 yourfunction

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

});});

完成！！！！无论如何谢谢你没有回答我真的发展了我的 Javascript 技能！！！ :) 我希望这会对某人有所帮助！！！

【讨论】：