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

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

javascript html

Javascript 如何处理不同显示尺寸的地图坐标,javascript,html,Javascript,Html,我有两个div:#wrapper和#map frame。 #wrapper具有溢出：隐藏和窗口大小，而#map frame的大小为%150，以提供放大地图的感觉这张地图是一张有建筑物和房屋的图像：我制作了一个数组，其中包含具有不同坐标的对象这些坐标存储在嵌套数组中： [ [0,0],[10,10] ] 那么一个从点x0y0到x10y10的假想盒子如果当我们点击时，鼠标坐标在这个想象的框内，一个函数将运行——它确实运行了。。直到我们调整屏幕的大小图像变小了，所以原本在[[329461]

我有两个div:#wrapper和#map frame。
#wrapper具有溢出：隐藏和窗口大小，而#map frame的大小为%150，以提供放大地图的感觉

这张地图是一张有建筑物和房屋的图像：我制作了一个数组，其中包含具有不同坐标的对象

这些坐标存储在嵌套数组中： [ [0,0],[10,10] ] 那么一个从点x0y0到x10y10的假想盒子

如果当我们点击时，鼠标坐标在这个想象的框内，一个函数将运行——它确实运行了。。直到我们调整屏幕的大小

图像变小了，所以原本在[[329461]，[684641]]的东西现在无法在一个达到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!")
            }
        }
    }
];

var用户={
金牌：20
}
var goTo=函数（e）{
var frame=document.getElementById（“映射框”）；
var x=e.offsetX；
变量y=e.offsetY；
对于（i=0；icurrentSpot.coords[0][0]&&y>currentSpot.coords[0][1]）&&（x10）{
console.log（“你买了一些鱼，丢了10块金子”）
用户：黄金-=10；
}
否则{
log（“你没有黄金可以买鱼！”）
}
}
}
];

这是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>


地图导航
#包装纸{
宽度：100vw；
高度：100vh；溢出：隐藏；位置：相对；
背景图像：url（“https://wallpapercave.com/wp/XqRBXyO.jpg")
}
#图框{
背景图像：url（'https://i.redd.it/xlolj0bg057z.jpg');
背景重复：无重复；
背景尺寸：包含；
宽度：150%；
身高：150%；
过渡：.2s所有输入输出都很容易；
}

由于我没有足够的声誉留下评论，我将不得不留下答案。你看过传单吗？这是一个非常简单的javascript库，专门为此目的而构建。我们在我工作的地方使用它，它工作完美。但是，它在纬度和经度点上工作，因此这可能不适用于您。不过，你可以把jpg的，并与这些工作，但我还没有做任何工作

另一个选项是跟踪地图缩放的比例。因此，当您放大时，跟踪比率以调整x和y的移动，然后跟踪相机中心从原点到x和y平移的+或-额外位置的位置，以获得正确的移动

这回答了你的问题吗？如果您将地图设置为特定高度，以100%的比率开始，这可能会有所帮助。

感谢您为我指出了解决这一令人沮丧问题的正确方向，我将研究这些问题！希望有帮助。如果有效，请将此标记为正确答案。