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

最新推荐文章于 2019-07-26 14:38:42 发布

牛仔裤新的

最新推荐文章于 2019-07-26 14:38:42 发布

阅读量3.3k

点赞数 1

本文链接：https://blog.csdn.net/jgfyyfd/article/details/83821415

版权

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

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

[xhtml] view plain copy print ?

<!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>

<!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" οncοntextmenu="doRightClick();return false;" οnmοusedοwn="initMouseDrag()" οnmοuseup="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" οncοntextmenu="doRightClick();return false;" οnlοad="parent.init(this,document.getElementById('MAPLayer'))" onmousewheel="scrollIt()"/></div></div></body></html>

唯一的js

[javascript] view plain copy print ?

/**
* 老紫竹，模仿谷歌地图制作的图片缩放，拖动的效果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;
}

/*** 老紫竹，模仿谷歌地图制作的图片缩放，拖动的效果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;}

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