Question

我目前正在制作一张自适应图像地图，我们也可以放大特定区域。

目前我有类似的东西（插图）：

我有3个不同区域的3个部分，但现在我不想在用户点击它时放大特定区域。我已经尝试了一些jquery脚本，但问题是它会缩放所有内容，并且该区域不会自行调整大小（但是当我们缩小窗口时，它会这样做。）

我想要这样的事情： http://preview.codecanyon.net/item/mapplic-custom-interactive-map-jquery-plugin/full_screen_preview/6275001?redirect_back=true&ref=coolansh63

当您点击它时，它只是缩放您想去的地方。

现在这里是我的代码：

https://jsfiddle.net/brch3rn9/

<html>
<head>
    <link rel="stylesheet" type="text/css" href="Mapify/src/mapify.scss">
    <link rel="stylesheet" type="text/css" href="css2.css">
</head>

<body>
    <div>
        <img id="test" src="flag.png" alt="" usemap="#Map" height="500px" width="488px"/>
    </div>

    <map name="Map" id="Map">
        <area alt="" title="1" id="TXXX" href="#" shape="poly" coords="355,72,362,422,475,435,472,83"/>
        <area alt="" title="2" id="TXX" href="#" shape="poly" coords="190,463,357,471,345,67,184,81"/>
        <area class="1" alt="" title="3" id="TX"  href="#" shape="poly" coords="87,438,187,459,181,78,12,98"/>
    </map>

    <footer>            
        <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
        <script src="Mapify/src/mapify.js"></script>

        <script>
            $("img[usemap]").mapify({
            popOver: {
                content: function(zone){ 
                    return "<strong>"+zone.attr("data-title")+"</strong>";
                },
                delay: 0.7,
                margin: "15px",
                height: "130px",
                width: "260px"
            }
        });
        </script>
    </footer>
</body>

编辑：我设法使用鼠标滚轮进行缩放，但现在还有另一个问题，地图区域没有调整大小，因此它们会偏移。有没有办法缩放用户单击的位置？

放大图像映射的区域

0 个答案: