HTML/JavaScript实现地图以鼠标为圆心缩放和移动
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
}
#box {
position: relative;
width: 1000px;
height: 400px;
background-color: rosybrown;
overflow: hidden;
left: 50%;
margin-left: -500px;
top: 100px;
}
#map {
position: absolute;
}
</style>
</head>
<body>
<div id="box">
<img src="map_test.png" alt="" id="map">
</div>
</body>
<script>
var box = document.getElementById("box");
var map = document.getElementById("map");
var isRun, // 是否可移动
startX, // 鼠标落下的位置
startY,
endX, // 鼠标放开的位置
endY,
rX, // 图片最终的位置（中间量）
rY,
scaleSize = 1, // 缩放比例
bgX = 0, // left 图片的最终位置
bgY = 0; // top
var box_width = parseFloat(window.getComputedStyle(box, false)["width"].slice(0, -2));
var box_height = parseFloat(window.getComputedStyle(box, false)["height"].slice(0, -2));
var map_width = parseFloat(window.getComputedStyle(map, false)["width"].slice(0, -2));
var map_height = parseFloat(window.getComputedStyle(map, false)["height"].slice(0, -2));
function restart() {
// 初始设置显示全部地图
var map_w, map_h;
if (box_width / box_height > map_width / map_height) {
// 此时以高为基准
scaleSize = box_height / map_height;
map_h = box_height;
map_w = map_width * scaleSize;
bgX = (box_width - map_w) / 2;
bgY = 0;
} else {
// 此时以宽为基准
scaleSize = box_width / map_width;
map_h = map_height * scaleSize;
map_w = box_width;
bgX = 0;
bgY = (box_height - map_h) / 2;
}
map.style.height = map_h + "px";
map.style.width = map_w + "px";
map.style.top = bgY + "px";
map.style.left = bgX + "px";
}
restart();
box.onmousedown = function (ev) {
if (ev.which === 1) {
// 鼠标左键
isRun = true;
startX = ev.pageX;
startY = ev.pageY;
return false;
}
if (ev.which === 2) {
restart();
return false;
}
};
box.onmouseup = function (ev) {
if (ev.which === 1) {
isRun = false;
bgX = rX;
bgY = rY;
}
return false;
};
box.onmousemove = function (ev) {
if (ev.which === 1 && isRun) {
endX = ev.pageX;
endY = ev.pageY;
rX = bgX + endX - startX;
rY = bgY + endY - startY;
map.style.left = rX + "px";
map.style.top = rY + "px";
}
};
box.onwheel = function (ev) {
// 以鼠标为中心缩放
// 1.记录鼠标当前位置（相对于window）
var x = ev.pageX;
var y = ev.pageY;
// 2.阻止默认事件
ev.preventDefault();
// ev.target 滚轮滑动的目标
// 3.计算出鼠标相对于地图的位置
x = x - box.offsetLeft;
y = y - box.offsetTop;
// 4.记录滚轮的变化值 -100/+100
var change_scale = -(ev.deltaY) / 1000;
var current_scale = scaleSize;
current_scale += change_scale;
// 5.限制缩放的倍数0.1-10
current_scale = current_scale < 0.1 ? 0.1 : (current_scale > 10 ? 10 : current_scale);
// 6.计算出相对于图片的同样倍数对应的位移距离
bgX = bgX - (x - bgX) * (current_scale - scaleSize) / scaleSize;
bgY = bgY - (y - bgY) * (current_scale - scaleSize) / scaleSize;
scaleSize = current_scale;
// 7.更新属性
map.style.width = map_width * scaleSize + "px";
map.style.height = map_height * scaleSize + "px";
map.style.top = bgY + "px";
map.style.left = bgX + "px";
// 注意：要求box标签的父级标签不能出现定位属性，否则会以出现定位属性的父级为基准计算offset
}
</script>
</html>
HTML/JavaScript实现地图以鼠标为圆心缩放和移动的更多相关文章
- javascript百度地图使用(根据地名定位、根据经纬度定位)
需要购买阿里云产品和服务的,点击此链接领取优惠券红包,优惠购买哦,领取后一个月内有效: https://promotion.aliyun.com/ntms/yunparter/invite.html? ...
- JavaScript进阶系列07,鼠标事件
鼠标事件有Keydown, Keyup, Keypress,但Keypress与Keydown和Keyup不同,如果按ctrl, shift, caps lock......等修饰键,不会触发Keyp ...
- FineReport中如何用JavaScript自定义地图标签
在日常使用地图过程中,通常会遇到地图标签,提示点等显示不满足我们的需求,需要进行JavaScript代码编写. 例如:在使用地图过程中,会发现很多地名显示的位置偏离.这时候就需要使用JavaScrip ...
- 每天一个JavaScript实例-铺货鼠标点击位置并将元素移动到该位置
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- javascript高德地图实现点击marker消失marker
javascript高德地图实现点击marker消失marker <pre> var markers = []; var positions = [[120.17718, 30.21772 ...
- javascript高德地图放到网页中的方法
javascript高德地图放到网页中的方法 1 先获取到经纬度http://lbs.amap.com/console/show/picker 2 下面代码直接设置下中心点 和标记点就可以了 < ...
- 在unity中用鼠标实现在场景中拖动物体，用鼠标滚轮实现缩放
在场景中添加一个Plan,Camera,Directional Light,Cube.添加两个脚本scrollerScirpt(挂在Camera),CubeDragScript(挂在Cube上). 1 ...
- javascript 百度地图
官方地址 http://lbsyun.baidu.com/index.php?title=jspopular 示例地址 http://developer.baidu.com/map/jsdemo.ht ...
- JS高德地图应用 ---- 鼠标点击加入标记 & POI搜索
代码如下 (填入Key值) : <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...
随机推荐
- [ERROR]pip insall pyodbc
- 错误代码如下: pip install pyodbc Looking in indexes: http://172.16.1.250/repository/douban/simple Collec ...
- 【Java编程思想读书笔记】继承中父类的初始化方式
继承中父类的初始化方式 p144页有感 一.提出问题 假设有一些类,这些类有继承关系的时候,当初始化一个子类对象,对于该类的父类而言,发生了什么呢?是仅仅只是复制了一个引用还是也会同时new一个父类对 ...
- 用命令提示符运行简单的Java程序报错
首先用记事本写一个最简单的Java代码,我把文件保存在桌面的HelloWorld文件夹中,这里将记事本的名称改为HelloWorld.java public class HelloWorld{ pub ...
- Pch文件预编译
因为项目用到Pch文件链接宏变量,因而稍作研究怎样使用,define宏变量其实并不合适 ,static const才最适合 Pch文件听说是上古世纪存在的文件,主要是用来全局预编译文件统一在一个出口, ...
- 范式通俗理解：1NF、2NF、3NF和BNCF
https://blog.csdn.net/wyh7280/article/details/83350722 范式通俗理解:1NF.2NF.3NF和BNCF原创hongiii 最后发布于2018-10 ...
- clr via c# 接口
1,常用接口及其定义 public interface IDisposable{ void Dispose(); } public interface IEnumerable}{ IEnumerato ...
- JavaBIO利用装饰器模式来组织和扩展接口
Stream接口,它直接负责字节流的传输. Reader/Writer接口,它本身不能读直接读写数据,而是以Stream接口为内部核心,在外围装饰增强,负责字符流的读写.字符和字节的转换过程必须指定字 ...
- Prime_Series_Level-1
0x01 先收集靶机端口,目录信息 1)nmap扫描端口 开启了ssh服务和apache服务,搜索相关漏洞 只有一个ssh用户名枚举,先放着 2)dirb爆破目录 dirb http://192.16 ...
- javascript生成指定位数的随机数
<script type="text/javascript"> document.write("请输入要生成随机数的位数:"); // digit是 ...
- R语言入门：使用RStudio的基本操作
R语言在人工智能,统计学,机器学习,量化投资,以及生物信息学方面有着十分广泛的运用.也是我大学的必修课,因此这里梳理一些有关R语言的知识点,做做记录. 首先我们需要知道R语言的工作区域,R语言默认的工 ...