在openLayers中循环添加图片

Posted 2023-04-13

在openLayers中循环添加图片 ，并给每个图片mouseover事件，鼠标悬浮上去根据图片坐标不同提示或弹出不同的内容，为什么所有的图片多是提示最后一个图片的信息。
var x=550,y=310;
for(var i=1;i<=3;i++)
//设置图标大小
var size = new OpenLayers.Size(21,25);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
//设置图标图片
var jz = new OpenLayers.Icon('script/img/marker.png',size,offset);

markers = new OpenLayers.Layer.Markers("分站");
//设置显示坐标
x = x-30;
y = y+30;
//图片显示
feature = new OpenLayers.Feature(markers,new OpenLayers.LonLat(x,y),'icon': jz);
marker = feature.createMarker();
markers.addMarker(marker);
map.addLayer(markers);
//文字显示
var point = new OpenLayers.Geometry.Point(x,y);
feature = new OpenLayers.Feature.Vector(point);
feature.attributes.id='测试'+i;
feature=[feature];
tower.addFeatures(feature);
//鼠标悬浮到图标上的事件
var companyname="开滦煤矿"+i,renshu="502"+i;
marker.events.register("mouseover", marker, function(evt)
var html="<b> "+companyname+"<br> 当前矿井人数："+renshu+"人</b>";
popup1=new OpenLayers.Popup("popup1",
new OpenLayers.LonLat(x,y),
new OpenLayers.Size(200,50),
html,
false);
popup1.setBackgroundColor("#ffffff");
popup1.setOpacity(12);
popup1.setBorder("1px solid #d91f12");
map.addPopup(popup1);
);
//鼠标移开事件
marker.events.register("mouseout", marker, function(evt)
popup1.hide();
);

参考技术A popup1=new OpenLayers.Popup("popup1",
this.lonlat,
new OpenLayers.Size(200,50),
html,
false);
new OpenLayers.LonLat(x,y), 改成 this.lonlat,
这样就ok了 参考技术B markers = new OpenLayers.Layer.Markers("分站");
map.addLayer(markers);

这两句应该移到循环之外

追问

移到外面早就试过的，没用的。

移到外面早就试过的，没用的。

参考技术C 你好，请问你的问题解决了吗？我也遇到同样的问题，，解决了分享一下吧，，谢谢

openlayer关于feature中的一个坑

在Openlayer中使用Feature时候，有时候我们需要使用图片来做Maker，今天就讲我在这碰到的一个坑。

这一个除了黄色部分其他部分透明的png图片。

将其加入地图中后。

我们要注册一个Feature的Select事件。

结果，点击中间透明部分时，竟然没有信息提示，只有点击黄色部分时候才有提示！这不科学！！！

后来，为了证明是不是图片中间透明的原因。我请美工妹妹帮我弄了另一张图。

就是它了。替换图片后，结果是点击圆里都行！这不科学啊！

好了，这是一个坑，写下来纪念。

有关于openlayer欢迎交流。