如何使用OpenLayers创建点击链接中心并在地图上显示弹出窗口？

我已经从GeoDjango返回的geojson将特征绘制到地图上。我现在想单独显示这些功能的列表。如果点击了某个地图，地图将会集中在该特定点上并显示一些包含某些详细信息的弹出窗口。一个很好的例子就是GoogleMaps，在那里你有一个地方列表，点击其中任何一个地方，都会在地图上显示一个对应于该地点的弹出窗口。如何使用OpenLayers创建点击链接中心并在地图上显示弹出窗口？

这篇文章建议，应该建立一个事件监听，所以我也试过，但无济于事：Link

我不知道如何将这些元素整合。下面的代码在点击链接后不会执行任何操作。 href也是令人困惑的，因为它检查我的视图的url模式，所以我扔了一个void（0）来避免这种情况。

<div id="place-list"></div> 
<div id="map"></div> 

// ... code that reads a geoJSON and outputs features 
var mapnik = new OpenLayers.Layer.OSM(); 
map.addLayer(vectorLayer); 
vectorLayer.addFeatures(features); 

// Build the clickable list of features 
var list = ""; 
for (var i=0, len=features.length; i len; i++) { 
     // This does not work? 
     list = list + "<a href=\"javascript:void(0);\""+"onclick=\"selectFeature("+i+");\">"+features[i].attributes["address"]+"</a><br/>"; 
} 

    $("#place-list").append(list); 

    var info; 
    function selectFeature(i) { 
     feature = features[i]; 
     info = new OpenLayers.Control.SelectFeature(
      vectorLayer, 
      { 
       eventListeners: { 
        getfeaturesinfo: function(event) { 
         map.addPopup(new OpenLayers.Popup.FramedCloud(
          feature.id, 
          feature.lonlat, 
          null, 
          event.text, 
          null, 
          true 
         )); 
        } 
       } 
      } 
     ); 

    } 
    map.addControl(info); 
    info.activate();

来源

2012-05-12 sharkfin

你是什么意思的“不工作”？不调用函数？或功能没有做任何有用的事情？您需要调试您的JS，为firefox使用firebug或为webkit浏览器使用Web inspector。 – ilvar

我发现这个函数从来没有被调用过，因为我一直在找某个地方的空值。但我后来添加了OpenLayers事件处理程序，并最终得到了我想要的！ – sharkfin

我能弄清楚我的问题。我必须创建一个OpenLayers.Control.Panel来保存我的链接，然后将其添加到我的地图。对于每个功能对象，我创建并链接了一个eventlistener，每个都有它的id。

下面是一个很好的例子：OpenLayers Eventhandler example！

来源

2012-05-15 04:02:27 sharkfin

如何使用OpenLayers创建点击链接中心并在地图上显示弹出窗口？

回答

相关问题