关注，帮你想想。
不过好像js无法画线，只能模拟画线，模拟来的不够精确，效率也不高。你完全可以做一个组件，也就是一个Image（放图片）+Panel，添加一些额外功能，如果你要更多的功能，最好到[地理信息系统]论坛，肯定给你的答案是能性能行，肯定行，那里人气不够旺，那里专门搞电子地图。{{{但是如果你要的是用鼠标选一个框，然后把所选区域放大，好像可以实现。}}}
我明天要和美美买书，所以如果今天晚上不能给你答案，就只能明天了。
不过好像js无法画线，只能模拟画线，模拟来的不够精确，效率也不高。你完全可以做一个组件，也就是一个Image（放图片）+Panel，添加一些额外功能，如果你要更多的功能，最好到[地理信息系统]论坛，肯定给你的答案是能性能行，肯定行，那里人气不够旺，那里专门搞电子地图。{{{但是如果你要的是用鼠标选一个框，然后把所选区域放大，好像可以实现。}}}
我明天要和美美买书，所以如果今天晚上不能给你答案，就只能明天了。
未完成的：1、放大区域没有聚焦
2、没有漫游功能
3、还有很多，我想把我以前GIS的很多功能用js实现。所以我会不断改进的，希望对大家有用。先给你这些代码，你先看着，自己改进改进也行，大家交流交流。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD><BODY>
<div id="Info" style="position:absolute;overflow:hidden;width:300px;height:50px;top:10px;left:500px;">
SCALE:1
</div>
<INPUT TYPE="radio" NAME="ZoomMode" checked>放大选区<BR>
<INPUT TYPE="radio" NAME="ZoomMode" >缩小选区<BR>
<INPUT TYPE="radio" NAME="ZoomMode" >按scale=2点击鼠标左键放大<BR>
<INPUT TYPE="radio" NAME="ZoomMode" >按scale=0.5点击鼠标左键缩小<BR>
<INPUT TYPE="radio" NAME="ZoomMode" >点击鼠标左键放大scale=2,按住CTRL+鼠标左键缩小scale=0.5<BR>
<INPUT TYPE="radio" NAME="ZoomMode" >漫游图像<BR>
<INPUT TYPE="button" NAME="full" onclick="fullExtent();" value="显示完整图像"><BR>
<!-- 工作区域，处于最底层 -->
<div id="MapShelf" style="position:absolute;overflow:hidden;width:600px;height:450px;top:0px;left:0px;background-color:#e1e1e1">
<!-- 放置地图的层，被操作区 -->
<div id="MapLayer" style="position:absolute;width:600px;height:450px;top:0px;left:0px;">
<IMG id="Map" SRC="testmap.jpg" WIDTH="1200" HEIGHT="800" BORDER=0 ALT="">
</div>
</div>
<!-- 置于map上方 -->
<div id="MapCover" style="position:absolute;overflow:hidden;background-color:#FFFFFF;FILTER:progid:DXImageTransform.Microsoft.Alpha(opacity=1)；z-index:1;">
</div>
<!-- 选取框 -->
<div id="selectBG" style="position:absolute;overflow:hidden;visibility:hidden;z-index:200;">
<TABLE id=selectBD style="border-style:dashed;border-color:red;width:1px;height:1px;border-width:1px;"><TR><TD></TD></TR></TABLE>
</div><SCRIPT LANGUAGE="JavaScript">
<!--
/***************************************************
基本参数设置：
****************************************************/
//地图框的参数
var MS_X=100;
var MS_Y=180;
var MS_Width=400;
var MS_Height=300;
var MS_Scroll=false;//地图的参数
var map_Width=tmp_Width=1200;
var map_Height=tmp_Height=800;var scale=1;
var maxScale=4;
var minScale=0.1;
//----------------------------------------------------
function init(){
with(document.all.MapShelf.style){
width=MS_Width;
height=MS_Height;
left=MS_X;
top=MS_Y;
if(MS_Scroll)overflow='scroll';
else overflow='hidden';
}
with(document.all.MapLayer.style){
width=MS_Width;
height=MS_Height; }
with(MapCover.style){
width=MS_Width;
height=MS_Height;
left=MS_X;
top=MS_Y;
}
with(selectBG){
width=MS_Width;
height=MS_Height;
left=MS_X;
//top=MS_Y;
}
}
//-->
</SCRIPT><SCRIPT LANGUAGE="JavaScript">
<!--
//=====================================================================
var selecting=false;
var x1,x2,y1,y2;
var offsetX=offsetY=0;//选取框坐标
var selWidth=selHeight=1;
function mDown(){
x1=window.event.x;
y1=window.event.y;
if(x1<MS_X||y1<MS_Y||x1>(MS_X+MS_Width)||y1>(MS_Y+MS_Height)){//选区无效
selecting=false;
return false;
}
selecting=true;
offsetX=window.event.offsetX;
offsetY=window.event.offsetY;
selectBG.style.left=x1;
selectBG.style.top=y1;
}
function mMove(){
if(!selecting)return false;
selectBG.style.visibility="visible";
x2=window.event.x;
y2=window.event.y;
if(x2<MS_X||y2<MS_Y||x2>(MS_X+MS_Width)||y2>(MS_Y+MS_Height)){//选区无效,在这里应该改进，允许当鼠标置于有效区外时选区边界未最大边界!!!!
selecting=false;
selectBG.style.visibility="hidden";
selectBD.style.width=1;
selectBD.style.height=1;
return false;
}
if(x2<x1||y2<y1){
selectBG.style.left=x2;
selectBG.style.top=y2;
selWidth=x1-x2;
selHeight=y1-y2;
}else{
selWidth=x2-x1;
selHeight=y2-y1;
}
try{
selectBD.style.width=selWidth;
selectBD.style.height=selHeight;
}
catch(x){}
}
function mUp(){
if(!selecting){
selecting=false;
return false
}else{
selecting=false;
}
zoomIn();
selectBG.style.visibility="hidden";
selectBD.style.width=1;
selectBD.style.height=1;
//document.selction.ontimeerror();
}
function inArea(){
}
//======================================================================
function zoomIn(){
if(selWidth>selHeight)scale=MS_Width/selWidth;
else scale=MS_Height/selHeight;
refresh();
}
function zoomOut(){
if(selWidth>selHeight)scale*=selWidth/MS_Width;
else scale*=selHeight/MS_Height;
refresh();
}
function fullExtent(){
var MS_WdivH=MS_Width/MS_Height;
var map_WdivH=map_Width/map_Height;
if(map_WdivH>MS_WdivH){
scale=MS_Width/map_Width;
MapLayer.style.left=0;
MapLayer.style.top=Math.round((MS_Height-scale*tmp_Height)/2)
refresh();
}else {
scale=MS_Height/map_Height;
MapLayer.style.top=0;
MapLayer.style.left=Math.round((MS_Width-scale*tmp_Width)/2);
refresh();
}
}
function refresh(){
if(scale>maxScale)scale=maxScale;
if(scale<minScale)scale=minScale;
tmp_Width=Math.round(scale*map_Width);
tmp_Height=Math.round(scale*map_Height);
Map.style.width=tmp_Width;
Map.style.height=tmp_Height;
//MapLayer.style.left=Math.round(-scale*offsetX);
//MapLayer.style.top=Math.round(-scale*offsetY);
// Info.innerHTML="SCALE:"+scale;
}
fullExtent();
document.onmousedown = mDown
document.onmousemove = mMove
document.onmouseup = mUp;
window.onload=init;
//-->
</SCRIPT></BODY>
</HTML>
原来你以前做过GIS的，果然不同！
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="llrock">
<META NAME="Keywords" CONTENT="map,select,zoom,pan">
<META NAME="Description" CONTENT=""></HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
/***************************************************
TDiv 得到层对象
****************************************************/
function TDiv(idstr){
this.idstr=idstr;
this.obj=document.all[idstr];
this.css=this.obj.style;
this.x=this.obj.offsetLeft;
this.y=this.obj.offsetTop;
this.width=this.obj.scrollWidth;
this.height=this.obj.scrollHeight;
this.moveTo=TDiv_moveTo;
this.moveBy=TDiv_moveBy;
this.resizeTo=TDiv_resizeTo;
this.show=TDiv_show;
this.hide=TDiv_hide;
return this
}
function TDiv_moveTo(x,y){
this.x=x;
this.y=y;
this.css.left=this.x;
this.css.top=this.y;}
function TDiv_moveBy(x,y){
this.moveTo(this.x+x,this.y+y);
}
function TDiv_resizeTo(w,h){
try{
this.css.width=w;
this.css.height=h;
}catch(x){}
}
function TDiv_show(){
this.css.visibility="visible";
}
function TDiv_hide(){
this.css.visibility="hidden";
}
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
/************************************************************
TSelect 产生选取效果
***************************************************************/
function TSelect(owner){//产生选取区域
this.owner=!owner?null:owner;//如果owner=null，那么将只会选取而不做人很事情
if(!document.oSelection)document.oSelection=new Array();//作为全局，为了允许生成多个TSelect实例
this.ID=document.oSelection.length
document.oSelection[this.ID]=this;
this.startX=0;//选取开始点的横坐标
this.startY=0;
this.endX=0;//选取结束点的横坐标
this.endY=0;
this.selWidth=1;
this.selHeight=1;
this.state=false;//正在选取 true,否则 false var html='<div id="SBF_'+this.ID+'" style="position:absolute;overflow:hidden;background-color:red;FILTER:progid:DXImageTransform.Microsoft.Alpha(opacity=1)；z-index:99;"></div>';//遮挡层，使在image上也可以工作
html+='\n<div id="SEL_'+this.ID+'" style="position:absolute;overflow:visible;width:600px;height:500px;z-index:200;background-color:;cursor:crosshair;">'
+'\n<div id="SBG_'+this.ID+'" style="position:absolute;overflow:hidden;visibility:hidden;z-index:100;">'
+'\n<TABLE id="SBD_'+this.ID+'" style="border-style:dashed;border-color:red;width:1px;height:1px;border-width:1px;"><TR><TD></TD></TR></TABLE>'
+'\n</div>'
+'\n</div>' document.write(html);
this.oBaffle=new TDiv('SBF_'+this.ID);
this.oPanel=new TDiv('SEL_'+this.ID);
this.oSelDiv=new TDiv('SBG_'+this.ID);
this.oSelTb=new TDiv('SBD_'+this.ID); this.mouseDown=Sel_mDown;
this.mouseMove=Sel_mMove;
this.mouseUp=Sel_mUp; this.oPanel.obj.onmousedown=new Function('document.oSelection['+this.ID+'].mouseDown()');
this.oPanel.obj.onmousemove=new Function('document.oSelection['+this.ID+'].mouseMove()');
this.oPanel.obj.onmouseup=new Function('document.oSelection['+this.ID+'].mouseUp()');
} function Sel_mDown(){
this.state=true;
this.startX=window.event.offsetX;
this.startY=window.event.offsetY;
this.oSelDiv.moveTo(this.startX,this.startY);
//根据不同情况，改变鼠标指针
if(!window.event.shiftKey&&window.event.ctrlKey){this.owner.action=1;this.oPanel.css.cursor='crosshair';
}else if(window.event.shiftKey&&!window.event.ctrlKey){this.owner.action=2;this.oPanel.css.cursor='hand';
}else {this.owner.action=0;this.oPanel.css.cursor='crosshair';}
} function Sel_mMove(){
if(!this.state)return false;
this.endX=window.event.offsetX;//不知为何，从右上向左下选取会闪动--???
this.endY=window.event.offsetY;//不知为何，从右下向左上选取会闪动--???
if(this.owner.action!=2){
this.oSelDiv.moveTo(Math.min(this.startX,this.endX),Math.min(this.startY,this.endY));
try{
this.selWidth=Math.abs(this.startX-this.endX);
this.selHeight=Math.abs(this.startY-this.endY);
this.oSelTb.resizeTo(this.selWidth,this.selHeight)
}
catch(x){}
this.oSelDiv.show();
this.oPanel.css.cursor='crosshair';
}else{//如果是漫游操作那么只是改变指针
this.oPanel.css.cursor='hand';
} }
function Sel_mUp(){
if(!this.state){
this.state=false;
return false
}else{
this.state=false;
}
this.oSelDiv.hide();
this.oSelTb.resizeTo(1,1);
if(this.owner){
switch(this.owner.action){
case 0:this.owner.zoomIn();
break;
case 1: this.owner.zoomOut();
break;
case 2: this.owner.pan();
break;
}
}
}
//-->
</SCRIPT>
<!--
/********************************************************
TMap 及相关函数
********************************************************/
//-------TMAP
function TMap(name,x,y,w,h){
this.name=name;
this.x=x;
this.y=y;
this.width=w;
this.height=h;
this.scale=1;
this.maxscale=16;//放大的最大比里
this.minscale=0.5;//缩小的最小比例
this.action=0;//0:zoom in by selection||1:zoom out by selection||2:pan||
this.tmpw=w;
this.tmph=h; this.layers=new Array();//预留功能，下个版本将支持多层 //1. create HTML code and object by new map object.
//2. get Html object
this.html='\n<div id="'+name+'_MSHF" style="position:absolute;overflow:hidden;width:'+w+'px;height:'+h+'px;top:'+y+'px;left:'+x+'px;background-color:#e1e1e1">'
+'\n<div id="'+name+'_MLAY" style="position:absolute;width:5000px;height:2000px;top:0px;left:0px;">'
+'\n</div>'//放置img,预留，由addLayer方法添加
+'\n</div>'
document.write(this.html);
this.oShelf=new TDiv(name+'_MSHF');
this.oLayer=new TDiv(name+'_MLAY');//v1.0不提供多层
//selection object
this.oSelection=new TSelect(this);
//public....
this.trim=TMap_trim;
this.zoomIn=TMap_zoomIn;
this.zoomOut=TMap_zoomOut;
this.fullExtent=TMap_fullExtent;
this.refresh=TMap_refresh;
this.pan=TMap_pan;
this.addLayer=TMap_addLayer;
} function TLayer(img){ //暂时无用
this.img=img;
}
function TMap_zoomIn(){//放大
if(this.oSelection.selWidth>this.oSelection.selHeight)this.scale*=(this.width/this.oSelection.selWidth);
else this.scale*=this.height/this.oSelection.selHeight;
this.refresh();
}
function TMap_zoomOut(){//缩小
if(this.oSelection.selWidth>this.oSelection.selHeight)this.scale*=(this.oSelection.selWidth/this.width);
else this.scale*=(this.oSelection.selHeight/this.height);
this.refresh();
}
function TMap_fullExtent(){//显示完整的图片
var MS_WdivH=this.width/this.height;
var map_WdivH=this.oImg.width/this.oImg.height;
if(map_WdivH>MS_WdivH){//如果图片的宽长比大于Tmap区域的，以宽为基准显示，否则以高为基准
this.scale=this.width/this.oImg.width;
this.oLayer.moveTo(0,Math.round((this.height-this.scale*this.oImg.height)/2))
var w=Math.round(this.scale*this.oImg.width);
var h=Math.round(this.scale*this.oImg.height);
this.oImg.resizeTo(w,h);
document.all.info.innerHTML="scale: "+this.scale;
}else {
this.scale=this.height/this.oImg.height;
var w=Math.round(this.scale*this.oImg.width);
var h=Math.round(this.scale*this.oImg.height);
this.oImg.resizeTo(w,h);
this.oLayer.moveTo(Math.round((this.width-this.scale*this.oImg.width)/2),0);
document.all.info.innerHTML="scale: "+this.scale;
}
}
function TMap_refresh(){
if(this.scale>this.maxscale)this.scale=this.maxscale;
if(this.scale<this.minscale)this.scale=this.minscale;
this.tmpw=Math.round(this.scale*this.width);
this.tmph=Math.round(this.scale*this.height);
//这里有些问题，建议使用者改进，当scale超越最大或最小时，尤其是图片缩小时，图片仍然被漫游到不可知位置，
var offsetX=Math.min(this.oSelection.startX,this.oSelection.endX);
var offsetY=Math.min(this.oSelection.startY,this.oSelection.endY);
var x=Math.round(this.scale*(this.oLayer.obj.offsetLeft-offsetX));
var y=Math.round(this.scale*(this.oLayer.obj.offsetTop-offsetY));
this.oLayer.moveTo(x,y);
this.oImg.resizeTo(this.tmpw,this.tmph); document.all.info.innerHTML="scale: "+this.scale;
}
function TMap_pan(){//漫游图片
this.oLayer.moveBy((this.oSelection.endX-this.oSelection.startX),(this.oSelection.endY-this.oSelection.startY))
}
function TMap_addLayer(img,w,h){//w h为图片的实际尺寸
this.layers[this.layers.length]=new Object();//预留功能，下个版本将支持多层
this.imghtml='<img id="'+this.name+'_MIMG" SRC="'+img+'" WIDTH="'+w+'" HEIGHT="'+h+'" BORDER=0 ALT="" ondrag="return false">';
this.oLayer.obj.innerHTML=this.imghtml;
this.oImg=new TDiv(this.name+'_MIMG');
this.oImg.width=w;
this.oImg.height=h;
}
function TMap_trim(){//调整Selection中挡板层和背景层和TMap对齐
this.oSelection.oPanel.moveTo(this.x,this.y);
this.oSelection.oBaffle. moveTo(this.x,this.y);
this.oSelection.oPanel.resizeTo(this.width,this.height);
this.oSelection.oBaffle.resizeTo(this.width,this.height);
}
//-->
</SCRIPT>
<BODY>
1、选取放大图像<BR>
2、按住CTRL+鼠标选取缩小图象<BR>
3、按住SHIFT+鼠标移动漫游图像<BR>
4、<a href="#" onclick="map1.fullExtent();">点击我显示完整图像</a><BR>
5、<a href="#" onclick="map1.oLayer.moveTo(0,0);map1.scale=1;map1.oImg.resizeTo(map1.oImg.width,map1.oImg.height);">点击我显示实际大小的图像</a><BR>
<span id=info bgcolor=yellow>scale: 1</span><SCRIPT LANGUAGE="JavaScript">
<!--
map1=new TMap('map1',300,50,600,450);//变量的名字 left top width height
map1.trim();//必须，
map1.addLayer('testmap.jpg',1200,800);//添加一个图片
map1.fullExtent();
//-->
</SCRIPT>
</BODY>
</HTML>