GeoDjangoから返されたgeojsonからマップにフィーチャをプロットしました。これらの機能のリストを個別に表示したいと思います。クリックすると、地図はその特定のポイントに集中し、詳細を示すポップアップが表示されます。良い例はGoogleMapsです。ここでは、場所のリストがあり、それらのいずれかをクリックすると、その特定の場所に対応するマップにポップアップが表示されます。
この投稿は、eventListenerを作成する必要があることを示唆しているので、これを試しましたが、役に立ちませんでした:リンク
これらのコンポーネントをどのように結び付けるかわかりません。以下のコードは、リンクがクリックされると何もしません。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();