[英]How to make a clicked link center and show a popup on the map using OpenLayers?
I've plotted features onto the map from a geojson returned by GeoDjango. 我已经从GeoDjango返回的geojson中将要素绘制到地图上。 I now want to display a list of these features individually.
我现在想单独显示这些功能的列表。 If one is clicked, the map will center in on that particular point and show a popup with some details.
如果单击一个,则地图将以该特定点为中心,并显示包含一些详细信息的弹出窗口。 A good example would be GoogleMaps, where on the side you have a list of places and clicking on any one of them will show a popup in the map corresponding to that particular place.
一个很好的例子是GoogleMaps,在那边您有一个地点列表,单击其中任何一个都会在地图上显示与该特定地点相对应的弹出窗口。
This post suggested that one should create an eventListener, so I have tried this but to no avail: Link 这篇文章建议一个人应该创建一个eventListener,所以我已经尝试过了但是没有用: 链接
I'm not sure how to tie these components together. 我不确定如何将这些组件捆绑在一起。 The below code doesn't do anything once a link is clicked.
单击链接后,以下代码将不执行任何操作。 The href is also confusing because it checks my view for a url pattern, so I threw in a void(0) to avoid that.
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();
I was able to figure out my problem. 我能够找出我的问题。 I had to create an OpenLayers.Control.Panel which held my links, then add that to my map.
我必须创建一个OpenLayers.Control.Panel来保存我的链接,然后将其添加到我的地图中。 For each of the feature objects, I created and linked an eventlistener to each with its id.
对于每个功能对象,我创建了一个事件侦听器并将其链接到其ID。
And here's a great example of how that's done: OpenLayers Eventhandler example ! 这是一个很好的示例: OpenLayers Eventhandler示例 !
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.