本人共使用了3個DIV.
第一步:放置DIV
第一個DIV用來存放map控件,第二個DIV放在MAP上用於覆蓋MAP,與map同大小。在overlay再嵌個div,高度與水印高度相同,遮住水印。OK,水印沒了。
第二步更改代碼:
在interaction.js中加入代碼,使拖動時overlay與地圖圖片一同移動,這樣就實現了拖動時也不會出現水印。
修改DragInteraction.prototype.OnMove、DragInteraction.prototype.OnUp即可。
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//aspx代碼
<div id="mapprediv" style="z-index = 1">
<cc1:MapControl ID="MapControl1" runat="server" Height="248px" Width="393px" MapAlias="Map1"/>
</div>
<div id ="overlay"
style="position:absolute; left:0;top:0;Height:248px;Width:393px;">
<div id="overlay_top"
style="position:absolute; left:0;top:0;Height:2px;Width:393px;">
<table width="100%" border="0" height="100%" bgcolor="#FF0000">
<tr>
<td> </td>
</tr>
</table>
</div>
</div>
///////////////////////////////////////////////////////////////////////////////////////////////////////////////
//js代碼
DragInteraction.prototype.OnUp = function(e) {
if (this.drag) {
this.element.style.position = 'relative';
this.element.style.left = 0;
this.element.style.top = 0;
this.element.zindex = 1;
this.element.style.clip = 'rect(' + 0 + ' ' + this.element.width + ' ' + this.element.height + ' ' + 0 + ')';
this.PointsData.AddPoint(e.clientX + GetScrollLeft(this.element), e.clientY + GetScrollTop(this.element));
if (this.onComplete) this.onComplete();
this.PointsData.Clear();
this.drag = false;
///////////////////////////////////////
//處理蓋住本控件的DIV
var o = FindElement("overlay");
if (o) {
//設置定位方式
o.style.position = 'absolute';
//設置位置
o.style.left = 0;
o.style.top = 0;
//設置顯示區域
o.style.clip = 'rect(' + 0 + ' ' + this.element.width + ' ' + this.element.height + ' ' + 0 + ')';
//設置顯示順序
o.zindex = 1000;
}
//控制地圖所在DIV
var p = FindElement("mapprediv");
if (p) {
p.zindex = 1;
p.style.position = 'absolute';
}
}
}
DragInteraction.prototype.UpdateIE = function(element, startPoint, currentPoint)
{
var clipTop, clipRight, clipBottom, clipLeft;
var currentLeft, currentTop, currentRight, currentBottom;
// Calculate absolute current coordinates of the image
currentLeft = element.origin.x + (currentPoint.x - startPoint.x);
currentTop = element.origin.y + (currentPoint.y - startPoint.y);
currentRight = currentLeft + element.width;
currentBottom = currentTop + element.height;
element.BorderWidth = 2;
// Check to see if image goes out of bounds, and if so, set the clipping
// parameters
if ( currentTop > element.origin.y ) {
clipTop = 0;
} else {
clipTop = element.origin.y - currentTop;
}
if (currentRight > (element.origin.x + element.width)) {
clipRight = (element.origin.x + element.width) - currentLeft - element.BorderWidth;
} else {
clipRight = currentRight - currentLeft - element.BorderWidth;
}
if (currentBottom > (element.origin.y + element.height)) {
clipBottom = (element.origin.y + element.height) - currentTop - element.BorderWidth;
} else {
clipBottom = currentBottom - currentTop - element.BorderWidth;
}
if (currentLeft > element.origin.x) {
clipLeft = 0;
} else {
clipLeft = element.origin.x - currentLeft;
}
// Set the map image's style parameters to actually move the image
element.style.position = "absolute";
element.style.left = (currentLeft - element.origin.x) + 'px';
element.style.top = (currentTop - element.origin.y) + 'px';
element.style.clip = 'rect(' + clipTop + 'px, ' + clipRight + 'px, ' + clipBottom + 'px, ' + clipLeft +'px)';
this.drag = true;
///////////////////////////////////////
//處理蓋住本控件的DIV
var o = FindElement("overlay");
if (o) {
//設置定位方式
o.style.position = 'absolute';
//設置位置
o.style.left = (currentLeft - element.origin.x) + 'px';
o.style.top = (currentTop - element.origin.y) + 'px';
//設置顯示區域
o.style.clip = 'rect(' + clipTop + 'px, ' + clipRight + 'px, ' + clipBottom + 'px, ' + clipLeft + 'px)';
//設置顯示順序
o.zindex = 1000;
}
//控制地圖所在DIV
var p = FindElement("mapprediv");
if (p) {
p.zindex = 1;
p.style.position = 'absolute';
}
}