代码如下

<!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. python中调用函数时，参数顺序与参数赋值问题

    设置类和函数如下:class MM(): def ff(self,url(1),method(2),data=None(3),cookie=None(4)): if method.lower()==& ...

  2. mongodb搭建带auth的主从

    1:下载mongodb包(mongodb3.4的方法一样,就是mongodb内用户设置到时候不同用户对应不同库,验证时得先创建某个库到用户参考http://ibruce.info/2015/03/03 ...

  3. 修改centos7容器的时间和宿主机时间一致

    一.问题 centos7系统容器时间与宿主机系统时间不一致,就进去查看一番,发现时区和宿主机上的时间不一致,下面就来解决一下 二.现象 1.查看centos宿主机的时间 输入如下命令查看 # date ...

  4. OptaPlanner 7.32.0.Final版本彩蛋 - SolverManager之批量求解

    上一篇介绍了OptaPlanner 7.32.0.Final版本中的SolverManager接口可以实现异步求解功能.本篇将继续介绍SolverManager的另一大特性 - 批量求解. 适用场景 ...

  5. 快速筛出topK的快速选择算法和BFPRT优化

    本文始发于个人公众号:TechFlow,原创不易,求个关注 在之前Python系列当中,我们介绍了heapq这个库的用法,它可以在\(O(nlogn)\)的时间里筛选出前K大或者前K小的元素.今天我们 ...

  6. Hibernate框架预览以及基础介绍

    前言 从本节我们开始进入到对于Hibernate框架的学习,当前Hibernate框架还未正式发布6.0稳定版本,所以这里我们以5.4.12Final版本进行讲解. Hibernate框架 Hiber ...

  7. jQuery on 绑定的事件 执行两次

    $(".class1").on("click",".class2",function(){ alert('提示'); }); 上面代码,怎么 ...

  8. windows10家庭版的策略组

    策略组是个好东西,可惜家庭版没有 但是,请看大佬博客https://blog.csdn.net/cangsheng45/article/details/82262037

  9. Java连载73-String方法简介

    一.字符串常用的方法 package com.bjpowernode.java_learning; ​ public class D73_StringMethodBriefIntroduction { ...

  10. SpringBoot缓存 --（一）EhCache2.X

    简介: Spring 3.1中开始对缓存提供支持,核心思路是对方法的缓存,当开发者调用一个方法时,将方法的参数和返回值作为key/value缓存起来,当再次调用该方法时,如果缓存中有数据,就直接从缓存 ...