首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >开放层和Jquery自动完成,以打开从向量层弹出。

开放层和Jquery自动完成,以打开从向量层弹出。
EN

Stack Overflow用户
提问于 2014-03-25 11:12:20
回答 1查看 1.6K关注 0票数 2

我正在用Openlayers开发一张在线地图。在那张地图上,我有一个矢量图层,显示餐馆。每家餐厅都有一个图标,可以点击这个图标打开一个弹出窗口,以显示更多信息。到目前一切尚好。但是我想在Jquery中实现一个自动完成搜索。所以,我想要做的是,当您在自动完成中选择一个餐厅名称时,我希望地图打开相应的弹出框(触发弹出加上地图的中心并缩放)。我设法把地图居中,但我找不出弹出式打开的原因。

在这里,我使用的自动完成代码:

代码语言:javascript
复制
$(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");
        }

});});

这就是我的向量层:

代码语言:javascript
复制
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函数中调用弹出窗口吗?或者我想做的事是不可能的?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-04-08 15:21:30

经过数周的努力,我终于找到了一个答案。

如果您感兴趣,请参阅以下内容:

首先,在自动完成的输入中添加一个“onchange=”您的函数()“

代码语言:javascript
复制
 <input type="text" id="searchresto" onchange="yourfunction(this)"/>

然后在你的第一层:

代码语言:javascript
复制
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);
    }

最后,只需在您的自动完成中调用您的函数

代码语言:javascript
复制
$(function() {
$( "#searchresto" ).catcomplete({
    delay: 0,
    source: "select_resto.php",
     select: yourfunction 

});});

完了!无论如何,由于没有回答,我真的提高了我的Javascript技能!)我希望这会对某人有所帮助!

票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/22632831

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档