Question

我有两个div：#wrapper和#map-frame。
#wrapper有溢出：隐藏和窗口大小，而#map-frame是％150大小，给人以放大地图的感觉。

这张地图是一张有建筑物和房屋的图片：我制作了一个具有不同坐标的物体的数组。

这些坐标存储在嵌套数组中： [[0,0]，[10,10]] 所以从点x0y0到x10y10

的虚构框

如果我们点击时，我们的鼠标坐标位于这个虚构框内，将运行一个函数 - 它会...直到.. 我们调整屏幕大小。

图像变得越来越小，所以在[[329,461]，[684,641]]处出现的东西现在无法到达300的图像......

以下是代码：

     var user = {
        gold: 20
     }
 var goTo= function(e){

    var frame = document.getElementById("map-frame");

    var x = e.offsetX; 
    var y = e.offsetY; 


    for(i = 0; i < spots.length; i++){//check for every spot in the map if we are inside the box
        var currentSpot = spots[i];
        if (    (x > currentSpot.coords[0][0] &&  y > currentSpot.coords[0][1]) && (x < currentSpot.coords[1][0] &&  y < currentSpot.coords[1][1])    ){
            console.log("Welcome to the " + currentSpot.name);
            currentSpot.action()
        }

    }

    frame.style.transform = "translate(-"+x/2+"px,-"+y/2+"px)";//this will center the camera at the point. kind of
}

var spots = [
    {
        coords: [[30,28],[135,87]],
        name: "Farm",
        action: function(){
            console.log("You enter the farm and are sold some hay")
        }
    },
    {
        coords: [[329, 461],[684,641]],
        name: "Fish Market",
        action: function(){
            if(user.gold > 10){
                console.log("You buy some fish and lose 10 gold")
                user.gold-=10;
            }
            else {
                console.log("You have no gold to buy fish!")
            }
        }
    }
];

这是HTML

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Map Navigation</title>
<style>
    #wrapper {
        width:100vw;
        height: 100vh;overflow:hidden;position:relative;
       background-image:url("https://wallpapercave.com/wp/XqRBXyO.jpg")
    }
 #map-frame{
    background-image: url('https://i.redd.it/xlolj0bg057z.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    width:150%;
    height: 150%;
    transition: .2s all ease-in-out;
 }
</style>
</head>
<body>
  <div id="wrapper" ><div id="map-frame" onclick="goTo(event)"></div> </div>
</body>
</html>

Answer 1

由于我没有足够的声誉发表评论，我将不得不留下答案。你看过leaflet.js吗？这是一个非常简单的使用专门为此目的构建的JavaScript库。我们在工作的地方使用它，它完美无缺。然而，它适用于纬度和经度点，因此可能对您不起作用。然而，您可以将jpg放入并与之合作，但我还没有完成任何工作。

另一种选择是跟踪地图缩放比例。因此，当你放大跟踪一个比例来调整你的x和y的移动，然后跟着它跟踪相机的中心从原点到+的位置 - 或者 - 从x和y的平移中得到的额外得到正确的动作。

这是否回答了你的问题？如果将地图设置为特定高度以使比率也达到100％，则可能会有所帮助。

如何处理不同显示尺寸的地图坐标

1 个答案: