[英]Openlayers and Jquery autocomplete to open popup from vector layer
我正在使用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函数中调用弹出窗口? 也许我想做的是不可能的?
经过数周的敲打,我终于找到了答案。
如果您有兴趣,请参见以下内容:
首先在自动完成输入中添加“ onchange =“ 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
});});
完成!!!! 无论如何,不回答我真的发展了我的Javascript技能!!! :)我希望这会帮助某人!!!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.