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 ...
随机推荐
- Python3(九) 闭包
一. 一切皆对象 函数式编程并没有标准定义,如果代码非常繁琐则考虑使用. 学习闭包的概念,不是python独有的. 其他大多数语言中的函数只是一段可执行的代码,并不是对象. python中的函数是对象 ...
- 14-SSM整合
今日知识 1. Spring整合MyBatis 2. SSM普通整合 3. SSM整合(Spring和SpringMVC分离) 4. 纯JavaConfig的SSM Spring整合MyBatis 1 ...
- Hexo搭建静态博客踩坑日记(二)
前言 Hexo搭建静态博客踩坑日记(一), 我们说到利用Hexo快速搭建静态博客. 这节我们就来说一下主题的问题与主题的基本修改操作. 起步 chrome github hexo git node.j ...
- 怎么用wait、notify巧妙的设计一个Future模式？
我们知道多线程可以实现同时执行多个任务(只是看起来是同时,其实是CPU的时间片切换特别快我们没感觉而已). 现在假设一个做饭的场景,你没有厨具也没有食材.你可以去网上买一个厨具,但是这段时间,你不需要 ...
- [Redis-CentOS7]Redis集合操作(四)
SADD 集合添加 127.0.0.1:6379> SADD bbs discuz.net (integer) 1 127.0.0.1:6379> SADD bbs "tiany ...
- Java 中常见排序算法
经典的排序算法总结 冒泡排序算法 算法描述: 比较相邻的元素:如果第一个比第二个大,就交换它们两个: 对每一对相邻元素作同样的工作,从开始第一对到结尾的最后一对,这样在最后的元素应该会是最大的数: 针 ...
- C#的多线程简洁笔记
New Thread(()=>{}).Start(); //匿名线程 Thread Ntd = new Thread(T1); Ntd.IsBackground = true; //后台线程 N ...
- Apache Log4j 反序列化代码执行(CVE-2019-17571) 漏洞分析
Apache Log4j 漏洞分析 仅用于研究漏洞原理,禁止用于非法用途,后果自负!!! CVE-2019-17571 漏洞描述 Log4j是美国阿帕奇(Apache)软件基金会的一款基于Java的开 ...
- bitmap+文本生成新的bitmap的实现
注:参数content为生成二维码bitmap的内容,该二维码bitmap在和文本title组合生成一个新的bitmap package info.ecloud.merchant.util; impo ...
- Python学习零基础＜入门必学＞
1. 注释注释 是任何存在于 # 号右侧的文字,其主要用作写给程序读者看的笔记. 2. 字面常量一个字面常量(Literal Constants)的例子是诸如 5.1.23 这样的数字,或者是如 这是 ...