方式一:使用marker方式
1、在地图上添加标记图层
var markers =newOpenLayers.Layer.Markers("Markers"); map.addLayer(markers);//地图初始化添加
2、动态添加标记和Popup方法:
//add map initial method map.events.register('click', this, function(e) { var LonLat=new OpenLayers.getLonLatFromPixel(e.xy); autoAddMarker(LontLat); OpenLayers.Event.stop(e); } ); //others method function getIcon(){ var size =newOpenLayers.Size(21,25); var offset =newOpenLayers.Pixel(-(size.w/2),-size.h); var icon =newOpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png', size, offset); return icon; } function createPopup(marker,LonLat){ var size=new OpenLayers.Size(200,120); var html="Lon:"+LonLat.Lon+"</br>Lat:"+LonLat.Lat; var popup=new OpenLayers.Popup(marker,LonLat,size,html,true); } function autoAddMarker(LontLat){ var marker=newOpenLayers.Marker(LonLat,getIcon); var popup=createPopup(marker,LonLat); marker.events.register('click',this,function(){ map.addPopup(popup,true);popup.show(); }); markers.addMarker(marker); }
3、事件触发,点击地图获得marker 及其信息窗口。
如果click不是OpenLayers.Events的register方法,就需要activate Click方法。
方式二:使用feature本身提供的特性
//显示矢量信息 'pointVectorLayer':new OpenLayers.Layer.Vector("加点图层", {eventListeners:{ 'featureselected':function(evt){ var feature = evt.feature; if(myPopup) this.map.removePopup(myPopup); myPopup=createPopup(feature.point); feature.popup = myPopup; this.map.addPopup(myPopup); }, 'featureunselected':function(evt){ var feature = evt.feature; this.map.removePopup(feature.popup); feature.popup.destroy(); feature.popup = null; } } }),
直接注册矢量层的事件,推荐使用第二种方式,它可以与整体弹出框的样式保持一致,都是popup类型的。