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 ...
随机推荐
- Linux 查看磁盘容量、查找大文件、查找大目录
Linux 查看磁盘容量.查找大文件.查找大目录 磁盘统计 查看磁盘使用情况 df -h 文件统计 查找/home 目录下大于800M的文件 find /home -type f -size +800 ...
- pycharm template 设置
${PROJECT_NAME} - 当前Project名称; (the name of the current project. ) ${NAME} -创建文件的对话框中制定的文件名; (the na ...
- 【重新整理】log4j 2的使用
一 概述 1.1 日志框架 日志接口(slf4j) slf4j是对所有日志框架制定的一种规范.标准.接口,并不是一个框架的具体的实现,因为接口并不能独立使用,需要和具体的日志框架实现配合使用(如log ...
- window下建立vue.js项目
安装node.js 直接下载安装文件安装就可以了 vue项目搭建 .到自己要件项目的文件夹运行cmd命令 .如果没有安装vue-cli .npm install -g vue-cli .vue ini ...
- React之props、state和render函数的关系
1.当组件中的state或者props发生改变的的时候,render函数就会被重新执行 2.当父组件的render函数被运行时,它的子组件的render都将被重新运行一次 3.子组件作为父组件里的一个 ...
- C#设计模式学习笔记：(12)代理模式
本笔记摘抄自:https://www.cnblogs.com/PatrickLiu/p/7814004.html,记录一下学习过程以备后续查用. 一.引言 今天我们要讲结构型设计模式的第七个模式,也是 ...
- git系列之---将本地的项目添加到码云仓库
1.前情: 本地写的 Demo 传到码云上面进行维护. 2.操作步骤: git init 将本地文件初始化为git 仓库,文件件会多一个 .git 文件夹[版本库]: git add . 或者 ...
- AndroidStudio报错：Emulator: I/O warning : failed to load external entity "file:/C:/Users/Administrator/.AndroidStudio3
场景 在进行Android Studio的.Android Studio目录从C盘修改为其他目录后,新建App启动提示: Emulator: I/O warning : failed to load ...
- WebStorm新建JS文件、CSS文件时自动生成文件注释
WebStorm 是jetbrains公司旗下一款优秀的前端开发工具.随着现在大型项目模块越来越多,参与人员也越来越多,实际项目中经常需要明确文件用途和文件的归属,所以创建文件时添加文件注释是一种必要 ...
- spark 报错 InvalidClassException: no valid constructor
2019-03-19 02:50:24 WARN TaskSetManager:66 - Lost task 1.0 in stage 0.0 (TID 1, 1.2.3.4, executor 1) ...