Openlayers和Jquery自動完成從矢量圖層打開彈出框

我正在開發一個使用Openlayers的在線地圖。在那張地圖上，我有一個顯示餐廳的矢量圖層。每個餐廳都有一個圖標，可以點擊打開一個彈出窗口，以顯示更多信息。到現在爲止還挺好。但我想在Jquery中實現自動完成搜索。所以我想要做的是當你在自動完成中選擇一個餐廳名稱時，我想要地圖打開相應的彈出窗口（觸發彈出窗口加上地圖和縮放中心）。我設法將地圖居中，但我無法弄清楚彈出式打開。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函數彈出？或者，也許我想要做的事是不可能的？

來源

2014-03-25 cadderrik

經過長時間的敲打我的頭在桌子上，我終於找到了自己的答案。

如果你有興趣見下文：

首先輸入您自動完成增加一個「平變化=」 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); 
    }

最後只需在你的自動完成功能中調用你的功能

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

});});

完成!!!! 無論如何thx不回答我真的發展我的Javascript技能！ :) 我希望這會幫助別人！

來源

2014-04-08 15:21:30 cadderrik

Openlayers和Jquery自動完成從矢量圖層打開彈出框

回答

相關問題