代码如下

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         * {
  8.             padding: 0;
  9.             margin: 0;
  10.         }
  12.         #box {
  13.             position: relative;
  14.             width: 1000px;
  15.             height: 400px;
  16.             background-color: rosybrown;
  17.             overflow: hidden;
  18.             left: 50%;
  19.             margin-left: -500px;
  20.             top: 100px;
  21.         }
  23.         #map {
  24.             position: absolute;
  25.         }
  26.     </style>
  27. </head>
  28. <body>
  29. <div id="box">
  30.     <img src="map_test.png" alt="" id="map">
  31. </div>
  32. </body>
  33. <script>
  34.     var box = document.getElementById("box");
  35.     var map = document.getElementById("map");
  36.     var isRun,  // 是否可移动
  37.         startX, // 鼠标落下的位置
  38.         startY,
  39.         endX,   // 鼠标放开的位置
  40.         endY,
  41.         rX,     // 图片最终的位置（中间量）
  42.         rY,
  43.         scaleSize = 1, // 缩放比例
  44.         bgX = 0, // left   图片的最终位置
  45.         bgY = 0; // top
  46.     var box_width = parseFloat(window.getComputedStyle(box, false)["width"].slice(0, -2));
  47.     var box_height = parseFloat(window.getComputedStyle(box, false)["height"].slice(0, -2));
  48.     var map_width = parseFloat(window.getComputedStyle(map, false)["width"].slice(0, -2));
  49.     var map_height = parseFloat(window.getComputedStyle(map, false)["height"].slice(0, -2));
  51.     function restart() {
  52.         // 初始设置显示全部地图
  53.         var map_w, map_h;
  54.         if (box_width / box_height > map_width / map_height) {
  55.             // 此时以高为基准
  56.             scaleSize = box_height / map_height;
  57.             map_h = box_height;
  58.             map_w = map_width * scaleSize;
  59.             bgX = (box_width - map_w) / 2;
  60.             bgY = 0;
  61.         } else {
  62.             // 此时以宽为基准
  63.             scaleSize = box_width / map_width;
  64.             map_h = map_height * scaleSize;
  65.             map_w = box_width;
  66.             bgX = 0;
  67.             bgY = (box_height - map_h) / 2;
  68.         }
  69.         map.style.height = map_h + "px";
  70.         map.style.width = map_w + "px";
  71.         map.style.top = bgY + "px";
  72.         map.style.left = bgX + "px";
  73.     }
  75.     restart();
  76.     box.onmousedown = function (ev) {
  77.         if (ev.which === 1) {
  78.             // 鼠标左键
  79.             isRun = true;
  80.             startX = ev.pageX;
  81.             startY = ev.pageY;
  82.             return false;
  83.         }
  84.         if (ev.which === 2) {
  85.             restart();
  86.             return false;
  87.         }
  88.     };
  89.     box.onmouseup = function (ev) {
  90.         if (ev.which === 1) {
  91.             isRun = false;
  92.             bgX = rX;
  93.             bgY = rY;
  94.         }
  95.         return false;
  96.     };
  97.     box.onmousemove = function (ev) {
  98.         if (ev.which === 1 && isRun) {
  99.             endX = ev.pageX;
  100.             endY = ev.pageY;
  101.             rX = bgX + endX - startX;
  102.             rY = bgY + endY - startY;
  103.             map.style.left = rX + "px";
  104.             map.style.top = rY + "px";
  105.         }
  106.     };
  107.     box.onwheel = function (ev) {
  108.         // 以鼠标为中心缩放
  110.         // 1.记录鼠标当前位置（相对于window）
  111.         var x = ev.pageX;
  112.         var y = ev.pageY;
  113.         // 2.阻止默认事件
  114.         ev.preventDefault();
  115.         // ev.target  滚轮滑动的目标
  116.         // 3.计算出鼠标相对于地图的位置
  117.         x = x - box.offsetLeft;
  118.         y = y - box.offsetTop;
  119.         // 4.记录滚轮的变化值 -100/+100
  120.         var change_scale = -(ev.deltaY) / 1000;
  121.         var current_scale = scaleSize;
  122.         current_scale += change_scale;
  123.         // 5.限制缩放的倍数0.1-10
  124.         current_scale = current_scale < 0.1 ? 0.1 : (current_scale > 10 ? 10 : current_scale);
  126.         // 6.计算出相对于图片的同样倍数对应的位移距离
  127.         bgX = bgX - (x - bgX) * (current_scale - scaleSize) / scaleSize;
  128.         bgY = bgY - (y - bgY) * (current_scale - scaleSize) / scaleSize;
  129.         scaleSize = current_scale;
  131.         // 7.更新属性
  132.         map.style.width = map_width * scaleSize + "px";
  133.         map.style.height = map_height * scaleSize + "px";
  134.         map.style.top = bgY + "px";
  135.         map.style.left = bgX + "px";
  136.         // 注意：要求box标签的父级标签不能出现定位属性，否则会以出现定位属性的父级为基准计算offset
  137.     }
  138. </script>
  139. </html>

HTML/JavaScript实现地图以鼠标为圆心缩放和移动的更多相关文章

  1. javascript百度地图使用(根据地名定位、根据经纬度定位)

    需要购买阿里云产品和服务的,点击此链接领取优惠券红包,优惠购买哦,领取后一个月内有效: https://promotion.aliyun.com/ntms/yunparter/invite.html? ...

  2. JavaScript进阶系列07,鼠标事件

    鼠标事件有Keydown, Keyup, Keypress,但Keypress与Keydown和Keyup不同,如果按ctrl, shift, caps lock......等修饰键,不会触发Keyp ...

  3. FineReport中如何用JavaScript自定义地图标签

    在日常使用地图过程中,通常会遇到地图标签,提示点等显示不满足我们的需求,需要进行JavaScript代码编写. 例如:在使用地图过程中,会发现很多地名显示的位置偏离.这时候就需要使用JavaScrip ...

  4. 每天一个JavaScript实例-铺货鼠标点击位置并将元素移动到该位置

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  5. javascript高德地图实现点击marker消失marker

    javascript高德地图实现点击marker消失marker <pre> var markers = []; var positions = [[120.17718, 30.21772 ...

  6. javascript高德地图放到网页中的方法

    javascript高德地图放到网页中的方法 1 先获取到经纬度http://lbs.amap.com/console/show/picker 2 下面代码直接设置下中心点 和标记点就可以了 < ...

  7. 在unity中用鼠标实现在场景中拖动物体，用鼠标滚轮实现缩放

    在场景中添加一个Plan,Camera,Directional Light,Cube.添加两个脚本scrollerScirpt(挂在Camera),CubeDragScript(挂在Cube上). 1 ...

  8. javascript 百度地图

    官方地址 http://lbsyun.baidu.com/index.php?title=jspopular 示例地址 http://developer.baidu.com/map/jsdemo.ht ...

  9. JS高德地图应用 ---- 鼠标点击加入标记 & POI搜索

    代码如下 (填入Key值) : <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...

随机推荐

  1. Linux gcc链接动态库出错：LIBRARY_PATH和LD_LIBRARY_PATH的区别

    昨天在自己的CentOs7.1上写makefile的时候,发现在一个C程序在编译并链接一个已生成好的lib动态库的时候出错.链接命令大概是这样的: [root@typecodes tcpmsg]# g ...

  2. Python Special Methods - 特殊方法

    特殊方法 特殊方法的存在是为了给 Python 解释器调用的,通常自己并不需要直接调用它们.也就是说不应该使用 my_object.__len__() 这种写法,而应该使用 len(my_object ...

  3. PWA 学习笔记

    深入学习网址:https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps 一. 基本介绍 1. 渐进式:适用所有浏览器,因为它是 ...

  4. python3安装pycrypto

    这几天想用py3弄一个系统,需要用到WeChat-sdk这个包,在pip install wechat-sdk的时候报了一系列的错误,最后定位是安装pycrypto出错,各种度娘之后说要安装vs201 ...

  5. oracle数据库重要的查询语句

    查看所有数据文件(dbf文件)的存放位置 SQL> select name from v$datafile; 标红色的为默认表空间文件 SQL> select name from v$da ...

  6. gcd综合

    问题: 如果正整数大于了1000有什么影响? 1.递推式gcd: int gcd(int a,int b) { ) { int c=a%b; a=b; b=c; } return a; } 2.递归式 ...

  7. python3-cookbook笔记：第九章 元编程

    python3-cookbook中每个小节以问题.解决方案和讨论三个部分探讨了Python3在某类问题中的最优解决方式,或者说是探讨Python3本身的数据结构.函数.类等特性在某类问题上如何更好地使 ...

  8. 使用 linux kernel +busybox 定制linux系统

    目的: 了解linux的启动过程 主要内容: 1.grub 是启动程序的bootloader 2.linux-kernel 是linux的开源内核 3.busybox 是linux的工具集合 启动顺序 ...

  9. PMP--1.7 项目治理

    治理凌驾于管理之上 组织治理用于影响项目治理. 组织治理需要组织根据组织文化.项目类型和组织需求裁剪治理框架,适用于当前组织. 其实组织治理的内容,在项目管理初期不需要详细了解,组织治理的内容都是高层 ...

  10. go 面向对象

    结构体 创建结构体变量和访问结构体字段 package main import "fmt" //创建结构体变量和访问结构体字段 type Person struct { Name ...