简单实现谷歌地图的图片缩放，移动效果的JS

最新推荐文章于 2021-10-31 12:45:30 发布

原创最新推荐文章于 2021-10-31 12:45:30 发布 · 1.1w 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#function #firefox #html #测试 #menu #div

Ext等客户端框架专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一种模仿谷歌地图实现的图片缩放和拖动效果，通过JavaScript实现了地图的放大、缩小和平移功能，并提供了完整的HTML和JS代码示例。

不支持矢量的缩放，只是一个大图的缩放和移动。多级地图的平滑缩放，我暂时还不会弄。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <mce:script type="text/javascript" src="map.js" mce_src="map.js"></mce:script> <title>老紫竹测试地图的缩放和拖拽</title> </head> <body> <div id="top"><img src="images/top.jpg" mce_src="images/top.jpg"/></div> <div id="menu"> widthMax<div id="widthMax">1</div> heightMax<div id="heightMax">2</div> widthMap<div id="widthMap">3</div> heightMap<div id="heightMap">4</div> centerX<div id="centerX">5</div> centerY<div id="centerY">6</div> mousex<div id="mousex">7</div> mousey<div id="mousey">8</div> </div> <div id="continer" style="position: absolute; left: 160px; top: 150px; width: 800px; height: 500px; overflow: hidden; z-index: 99; background-color: #DDDDFF" oncontextmenu="doRightClick();return false;" onmousedown="initMouseDrag()" onmouseup="stopdrag()" > <div id="MAPLayer" style="position: absolute; left: 0px; top: 20px; z-index: 9; background-color: #FF0000"><img id="MAP" name="MAP" src="images/map.gif" mce_src="images/map.gif" oncontextmenu="doRightClick();return false;" onload="parent.init(this,document.getElementById('MAPLayer'))" onmousewheel="scrollIt()"/></div> </div> </body> </html>

唯一的js

/** * 老紫竹，模仿谷歌地图制作的图片缩放，拖动的效果js * www.laozizhu.com * 部分功能不能再Firefox下面用，有点可惜 */ var widthFrame = 800; var heightFrame = 500; var widthMax; var heightMax; var widthMap; var heightMap; var map; var mapLayer; var centerX; var centerY; var mousex; var mousey; function init(m,ml){ map = m; map.onmousemove = mouseMove; mapLayer = ml; widthMax = map.width; heightMax = map.height; widthMap = map.width; heightMap = map.height; centerX = widthMap/2; centerY = heightMap/2; toCenter(); } function showParam(){ document.getElementById("widthMax").innerText=widthMax; document.getElementById("heightMax").innerText=heightMax; document.getElementById("widthMap").innerText=widthMap; document.getElementById("heightMap").innerText=heightMap; document.getElementById("centerX").innerText=centerX; document.getElementById("centerY").innerText=centerY; document.getElementById("mousex").innerText=mousex; document.getElementById("mousey").innerText=mousey; } function toCenter(){ if(centerX< widthFrame/2){ centerX = widthFrame/2; } if(centerX>widthMap-widthFrame/2){ centerX = widthMap-widthFrame/2; } if(centerY< heightFrame/2){ centerY = heightFrame/2; } if(centerY> heightMap-heightFrame/2){ centerY = heightMap-heightFrame/2; } showParam(); mapLayer.style.left=-1*(centerX-widthFrame/2)+"px"; mapLayer.style.top=-1*(centerY-heightFrame/2)+"px"; } function resizeTo(w,h){ widthMap = map.width = w; heightMap = map.height = h; toCenter(); } function bigger(){ var w = widthMap*1.2; if(w>widthMax){ w= widthMax; } var h = heightMap*1.2; if(h>heightMax){ h = heightMax; } centerX = centerX*w/widthMap; centerY = centerY*h/heightMap; resizeTo(w,h); } function smaller(){ var w = widthMap*0.8; var h = heightMap*0.8; // 保证不会缩小到屏幕放不下了 if(w<widthFrame){ w = widthFrame; h = heightMax*w/widthMax; // 保证缩放比例 }else if(h<heightFrame){ h = heightFrame; w = widthMax*h/heightMax; // 保证缩放比例 } centerX = centerX*w/widthMap; centerY = centerY*h/heightMap; resizeTo(w,h); } function doRightClick(){ var x = mousex-300; var y = mousey-100; if(x>widthFrame/2+50){ centerX+=20; }else if(x<widthFrame/2-50){ centerX-=20; } if(y>heightFrame/2+50){ centerY += 20; }else if(y<heightFrame/2-50){ centerY -=20; } toCenter(); } function moveButton(x,y){ if(x==0 && y==0){ centerX = widthMap/2; centerY = heightMap/2; }else{ centerX += x; centerY += y; } toCenter(); } function mouseMove(ev){ ev = ev || window.event; var mousePos = mouseCoords(ev); mousex = mousePos.x; mousey = mousePos.y; //判断鼠标已被按下且onmouseover和onmousedown事件发生在同一对象上 if(down&&event.srcElement==obj){ centerX -= (mousex-x)*1; centerY -= (mousey-y)*1; toCenter(); x = mousex; y = mousey; } showParam(); } function mouseCoords(ev){ if(ev.pageX || ev.pageY){ return {x:ev.pageX, y:ev.pageY}; } return { x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, y:ev.clientY + document.body.scrollTop - document.body.clientTop }; } // 鼠标拖动效果 var x,y,z,down=false,obj; function initMouseDrag(ev){ ev = ev || window.event; obj=ev.srcElement //事件触发对象 obj.setCapture() //设置属于当前对象的鼠标捕捉 z=obj.style.zIndex //获取对象的z轴坐标值 //设置对象的z轴坐标值为100，确保当前层显示在最前面 obj.style.zIndex=100 x=mousex //获取鼠标指针位置相对于触发事件的对象的X坐标 y=mousey //获取鼠标指针位置相对于触发事件的对象的Y坐标 down=true //布尔值，判断鼠标是否已按下，true为按下，false为未按下 obj.style.cursor='move'; } function moveit(){ } function stopdrag(){ //onmouseup事件触发时说明鼠标已经松开，所以设置down变量值为false down=false obj.style.zIndex=z //还原对象的Z轴坐标值 obj.releaseCapture() //释放当前对象的鼠标捕捉 obj.style.cursor='normal'; } var scrolling = false; function scrollIt(){ if(scrolling){ return true; } scrolling = true; if(event.wheelDelta>0){ bigger(); }else{ smaller(); } scrolling = false; event.returnValue = false; }

用到的地图，比较大，大家自己随便找一个大图，测试看看好了！