zoukankan      html  css  js  c++  java
  • 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 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类型的。

  • 相关阅读:
    12.14 Daily Scrum
    12.13 Daily Scrum
    12.12 Daily Scrum
    12.11 Daily Scrum
    12.10 Daily Scrum
    12.9 Daily Scrum
    12.8 Daily Scrum
    M1事后分析汇报以及总结
    alpa开发阶段团队贡献分
    第9周团队作业
  • 原文地址:https://www.cnblogs.com/boonya/p/2404731.html
Copyright © 2011-2022 走看看