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 ...
随机推荐
- MS SqlServer 的日期格式化函数 Convert
MS SqlServer 的日期格式化函数:Convert(data_type[(length)], expression [, style])参数:data_type[(length)]代表转换的数 ...
- 杭电-------2044一只小蜜蜂（C语言写）
#include<stdio.h> ] = { }; long long divide(int n) { ) { ; } ) { return a[n]; } ) + divide(n - ...
- 杭电------2097 Sky数（C语言写）
//这个题没有一次过,哈哈哈哈,题意理解错了,开始还以为是必须加起来等于22呢 //其实就是依次算出个进制下的和,虽然每个循环最多循环四次,但是还是加上必要的判断,想办法让 //提前结束 #inclu ...
- 花 1 小时，开源设计 LoRa 继电器开关
提示1:锐米所有 LoRa 产品严格遵循国标标准的 LoRaWAN 协议. 提示2:您可以免费复制,修改和商用本项目,请注明锐米原创. 提示3:如果您有其他 LoRa 需求或建议,欢迎联系锐米 sup ...
- python 安装pyinstaller
pip install https://github.com/pyinstaller/pyinstaller/archive/develop.tar.gz
- Gridview的stretchMode等属性详解
<GridView android:id="@+id/grid"android:layout_width="fill_parent"android:lay ...
- DotNet 源码学习——QUEUE
1.Queue声明创建对象.(Queue为泛型对象.) public class Queue<T> :IEnumerable<T>,System.Collections.ICo ...
- Centos 7 使用（Service iptables stop/start）关闭/打开防火墙 Failed to stop iptables.service: Unit iptables.service not loaded.
背景: 测试部署NetCore 项目到linux 系统时,窗口显示项目部署成功:但是本机无法访问(linux 在虚拟机上[ centos 7.6] ); 如下图↓ 能够相互ping 通,(Xshe ...
- 外部SRAM的种类
外部SRAM注意事项 为使外部SRAM器件达到出最佳性能,建议遵循以下原则: 使用与连接的主系统控制器的接口数据带宽相同的SRAM. 如果管脚使用或板上空间的限制高于系统性能要求,可以使用较连接的控制 ...
- Linux学习Day3：新手必须掌握的Linux命令（二）
今天学习的命令都是运维工作中经常要用到的,非常实用,必须要用心学习,争取把这些命令烂熟于心,具体内容如下: 一.系统状态监测命令 1.ifconfig命令 用于获取网卡配置与网络状态等信息. [roo ...