openlayers custom marker and popup 动态标注提示信息
困惑的很久的openlayers 动态标注提示信息问题,现已解决。其实很简单
1. 创建图层layer
function
enableMarkerLayer()
{//创建图层
markers =
new OpenLayers.Layer.Markers(“图层名称”);
map.addLayer(markers);
markers.setZIndex(200);
}
2. 创建marker对象
传入对象 经度、纬度、图片宽度、图片高度、标注图片
var marker = GetMark(ll.lon, ll.lat, w, h, stateImg);
function GetMark(lon, lat, w, h, statusImg){
var size = new OpenLayers.Size(w, h);
var offset = new OpenLayers.Pixel(-(size.w/2),
-size.h);
var icon = new OpenLayers.Icon(statusImg, size,
offset);
return new OpenLayers.Marker(new
OpenLayers.LonLat(lon,lat),icon)
}
3. 添加marker到图层中,注册openlayers事件机制
markers.addMarker(marker);
marker.events.register(“mousedown”, marker,
markerClickMouseDown);
var markerClickMouseDown = function(evt){
removeAllPopup();
OpenLayers.Event.stop(evt);
popup = new OpenLayers.Popup(“”+ll.lon + “”+ ll.lat,
ll,
new OpenLayers.Size(200,200),
html,
false);
popup.setBackgroundColor(“black”);
// popup.setOpacity(0.1);
//popup.autoSize=true;
map.addPopup(popup);
};
删除方法如下:
function removeAllPopup(){//移除标记信息
var len
=map.popups.length;
for(var
i=len-1;i>=0;i–){
map.removePopup(map.popups[i]);
}
}
3. 最后在click后,销毁标注
if(popup){
removeAllPopup();
OpenLayers.Event.stop(evt);
return !this.stopSingle;
}
到这一步相信大家都会大功告成,谢谢。欢迎指点,共同讨论!
转载自:https://blog.csdn.net/penghuangit/article/details/5552452