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

You may also like...