代码如下

<!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实现地图以鼠标为圆心缩放和移动的更多相关文章

  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. Apache 相关 mod_rewrite ,RewriteCond,{HTTP_HOST}

    1．给子域名加www标记  RewriteCond %{HTTP_HOST} ^([a-z.]+)?example\.com$ [NC] RewriteCond %{HTTP_HOST} !^www\ ...

  2. VFP 的 CursorAdapter 相关

    VFP 的 CursorAdapter 是在VFP 8 中增加的最重要的新功能,它提供了一种采用统一接口的方式来访问远程数据源. 现在正值新冠肺炎期间,闲着也是闲着,在整理原理的资料时,发现十多年前的 ...

  3. pytorch之 batch_train

    import torch import torch.utils.data as Data torch.manual_seed(1) # reproducible BATCH_SIZE = 5 # BA ...

  4. rysnc知识梳理

    rsync语法: Local: rsync [OPTION...] SRC... [DEST] #<===本地传输数据 Access via remote shell: #<===借助通道 ...

  5. pip 安装源-Python学习

    1.国内常用的安装源 -- 豆瓣:https://pypi.douban.com/simple -- 阿里:https://mirrors.aliyun.com/pypi/simple --中国科技大 ...

  6. codewars--js--Find The Parity Outlier

    问题描述:(找出奇数数组中唯一的偶数,或是偶数数组中唯一的奇数) You are given an array (which will have a length of at least 3, but ...

  7. 教你快速使用数据可视化BI软件创建4S店销售数据大屏

    灯果数据可视化BI软件是新一代人工智能数据可视化大屏软件,内置丰富的大屏模板,可视化编辑操作,无需任何经验就可以创建属于你自己的大屏.大家可以在他们的官网下载软件.   本文以4S店销售数据大屏为例为 ...

  8. 使用Nginx对.NetCore站点进行反向代理

    前言 之前的博客我已经在Linux上部署好了.NetCore站点且通过Supervisor对站点进行了进程守护,同时也安装好了Nginx.Nginx的用处非常大,还是简单说下,它最大的功能就是方便我们 ...

  9. Sql Server 2008 【存储过程】 死锁 查询和杀死

    1 . 使用数据库中,可能出现死锁, 导致程序 无法正常使用. Create procedure [dbo].[sp_who_lock] ( @bKillPID Bit=0 -- 0: 查询 1: 结 ...

  10. 简单的OO ALV显示ALV及下载

    REPORT OO_ALV. CLASS OO_ALV DEFINITION. PUBLIC SECTION. METHODS:GET_DATA IMPORTING AMOUNT TYPE I,&qu ...