marker.js

WebGis基本功能展示

Marker = Class.create(); 
Marker.prototype = Object.extend(new Abstract.OverLayer(), {
    initialize: function(){
        this.id = Util.createUniqueID("Over_Marker_");
    },
    
    getCoord: function(){
        return this.coord;
    },
    setCoord: function(point){
        this.coord = point.getCoord();
    },
    
    getIcon: function(){
        return this.icon;
    },
    setIcon: function(icon){
        this.icon = icon;
    },
    
    getInfo: function(){
        return this.info;
    },
    setInfo: function(info){
        this.info = info;
    },
    
    getShadowIcon: function(){
        return this.shadowIcon;
    },
    setShadowIcon: function(sIcon){
        this.shadowIcon = sIcon;
    },
    
    setToMap: function(mapDiv, model, overLayDiv){
        this.mapDiv = mapDiv;
        this.model = model;
        this.sPoint = Util.getScreenPixel(this.coord, model.getZoom());
        var deltaX = this.sPoint.x - this.icon.width/2;
        var deltaY = this.sPoint.y - this.icon.height;
        var markerDiv = $(this.id);
        var markerDiv = Util.createDiv(this.id, deltaX, deltaY, this.icon.width, this.icon.height,null, 'absolute');
        markerDiv.style.zIndex = 10;
        markerDiv.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.icon.src + ", sizingmethod=scale);";
        
        if(overLayDiv){
            this.div = overLayDiv;
            overLayDiv.style.left = deltaX+'px';
            overLayDiv.style.top = deltaY+'px';
        }
        else{
            this.model.clearOverLayers();
            this.div = markerDiv;
            this.insert();            
            this.div.style.cursor = "hand";
        }
        this.showInfoWindow();
        Event.observe(markerDiv, "click", this.reLoadInfo.bindAsEventListener(this))        
    },
    
    reLoadInfo: function(e){
        if(this.info && this.infoDiv){
            this.infoDiv.style.display = "";
        }
    },
    
    showInfoWindow: function(){
        var newDeltaX = this.sPoint.x + this.icon.width-8;
        var newDeltaY = this.sPoint.y - this.icon.height-60;
        var mapDiv = $("map_" + this.model.getId());
        this.infoDiv = $("Over_Marker_Info");
        this.infoDiv.style.left = newDeltaX;
        this.infoDiv.style.top = newDeltaY;        
        this.infoDiv.style.cursor = "default";
        this.infoDiv.style.display = "";
        $('Info').innerHTML = this.info;
        mapDiv.appendChild(this.infoDiv);
    }
});

Icon = Class.create();
Icon.prototype = {
    initialize: function(w, h, src){
        this.width = w;
        this.height = h;
        this.src = src;
    }
};

function hideInfoWindown(e, windowId) {
	var infoWindow = $(windowId);
	infoWindow.style.display = "none";
	Event.stop(e)
}