html + jquery + viewer 实现地图定位+放大+拖拽

偷偷学习当个大佬

已于 2023-03-01 10:53:06 修改

阅读量748

点赞数

文章标签： html5 javascript Powered by 金山文档

于 2023-03-01 10:48:43 首次发布

本文链接：https://blog.csdn.net/qq_57546145/article/details/129276336

版权

上代码。需要引用jquery的js ， viewer的js和css

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="css/index.css" />
        <link rel="stylesheet" href="css/viewer.min.css" />
    </head>
    <body>
        <div class="layout-map" id="LayoutMap">
    <!--viewer 可以实现图片的缩放和拖拽，但是是在生成的蒙版内操作，因此需要把原来的图片隐藏掉 
    style="display: none; -->
          <img id="MapImage" src="./img/view.jpg"  style="display: none;" />
        </div>
    </body>
    <script src="js/plug/jquery.min.js"></script>
    <script src="js/plug/jquery.quee.js"></script>
    <script src="js/plug/viewer.min.js"></script>
    <script src="js/a.js"></script>
    <script src="js/ismap.js"></script>
    <script src="js/map.js"></script>
</html>

a.js 实现viewer的方法

function initMapImage() {
// 获取<img> 外侧框架的class名或者id名   我这里外侧是<div>的id名
  $('#LayoutMap').viewer({
    inline: true,
    title: false,
    button: false,
    navbar: false,
    toolbar: false,
    tooltip: false,
    zoomRatio: 0.5,
    minZoomRatio: 0.05,
    maxZoomRatio: 100
  });
};

ismap.js 实现图片的定位

//  寻找定位坐标
function isaddre() {

    var ProportionHeightInImg; 
    var ProportionWidthInImg; 

  //    获取<img> 外侧框架的class名或者id名   我这里外侧蒙版的<div>的id名
   // 因为把原来的地图隐藏了，这里操作的是蒙版的<div>  代码里边没有  F12进开发模式看
    $('.viewer-canvas').click(function(e){
        e = e || window.event;
        var x = e.offsetX || e.layerX,
            y = e.offsetY || e.layerY;


        //获取图片的高度和宽度
        // 同理 蒙版的<img>的class名
        var myImg = document.querySelector(".viewer-move");
        var currWidth = myImg.clientWidth;
        var currHeight = myImg.clientHeight;

        ProportionWidthInImg = x / currWidth;
        ProportionHeightInImg = y / currHeight;
        
         //点击图片想定位的位置  获取它的宽高比例
         console.log(ProportionWidthInImg);
         console.log(ProportionHeightInImg);

   // 这里偷懒了  直接判断比例范围  在里边写方法就行
   if (0.43932070542129326 <= ProportionWidthInImg && ProportionWidthInImg <= 0.47093403004572176 && 
       0.3656157463856471 <= ProportionHeightInImg &&  ProportionHeightInImg <= 0.43738024734366837) {
       alert("阿拉善高原");    
        }

    });

};

map.js 调用方法

$(function() {
    initMapImage();
    isaddre();
});

偷偷学习当个大佬

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html + jquery + viewer 实现地图定位+放大+拖拽

html + jquery + viewer 实现地图定位+放大+拖拽
复制链接

扫一扫

html + jquery + viewer 实现地图定位+放大+拖拽

“相关推荐”对你有帮助么？