OpenLayers 动态添加标记(Marker)和信息窗(Popup)
生活随笔
收集整理的這篇文章主要介紹了
OpenLayers 动态添加标记(Marker)和信息窗(Popup)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
方式一:使用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 methodfunction 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類型的。
轉載于:https://www.cnblogs.com/boonya/archive/2012/03/18/2404731.html
總結
以上是生活随笔為你收集整理的OpenLayers 动态添加标记(Marker)和信息窗(Popup)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 求会过去的歌词!
- 下一篇: 哎哟我的妈呀是什么歌?