我已经从 GeoDjango 返回的 geojson 将特征绘制到地图上。我现在想单独显示这些功能的列表。如果单击一个,地图将以该特定点为中心并显示一个包含一些详细信息的弹出窗口。一个很好的例子是谷歌地图,在其中你有一个地点列表,点击其中任何一个都会在地图中显示与该特定地点相对应的弹出窗口。
这篇文章建议人们应该创建一个事件监听器,所以我尝试了这个但无济于事:链接
我不确定如何将这些组件联系在一起。单击链接后,以下代码不会执行任何操作。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();