jquery - 缩放后标记不完全在同一点上。自定义 map GTA5

标签 jquery html css

我希望我能向您展示实际问题，并希望任何人都知道解决这个问题的方法。

WithoutZoom Picture

Click me if you want to see the map

如何使用？ 在左下角设置一个标记并将其放入 map 中。单击 Numpad + 键增加或 - 减少 map 。 (最大缩放级别 8)

所有标记都是 img 的，并将附加在该框中。

<div id="MarkerBox"></div>

这是标记的样子:

<img id="Marker_0" src="images/gelb.png" alt="Map Marker" style="top: 417px; left: 745px; position: absolute;">

zoom.js

一旦 map 被放大，这个函数就会将所有的标记移动到新的位置。这可能是错误的。

var markersScallingUp = function()
{
    $("#MarkerBox img").each(function(){
        $(this).css("top", $(this).offset().top * 1.2);
        $(this).css("left", $(this).offset().left * 1.2);
    });
}

以同样的方式减少标记的位置:(也许缩放不是我“moveMarkerPosition”最好的名字)

var markersScallingDown = function()
{
    $("#MarkerBox img").each(function(){
       $(this).css("top", $(this).offset().top / 1.2);
       $(this).css("left", $(this).offset().left / 1.2);
    });
}

更改 map 大小并使用函数进行缩放:

    var currentZoomLevel = 0;

    var mapWidth = $("#map").width();
    var mapHeight = $("#map").height();

    $(document).keydown(function(e){
    switch(e.which)
    {
                    case 107:   
                        if(currentZoomLevel <= 8){
                            $("#map").focus();  
                            $("#map").width(mapWidth * 1.2);
                            $("#map").height(mapHeight * 1.2);
                            markersScallingUp();
                            mapWidth = $("#map").width();
                            mapHeight = $("#map").height(); 

                            currentZoomLevel++;
                        }
                    break;

                    case 109:   
                        if(currentZoomLevel >= 1){
                            $("#map").focus();
                            $("#map").width(mapWidth / 1.2);
                            $("#map").height(mapHeight / 1.2);  
                            mapWidth = $("#map").width();
                            mapHeight = $("#map").height(); 
                            markersScallingDown();
                            currentZoomLevel--;
                        }
                    break;
                }           
    });

在下图中，我们看到我们缩放的人，标记并没有完全放置在用户放置的相同位置。变焦越大，实际目标的标记越远。我对每一项奖励都很满意!

4xZoom

最佳答案

目前您正在 map 区域内扩展 map 图像，然后对像素进行一些手动缩放。

我将图像设置为“mapareaid”的背景，并使用百分比而不是像素作为标记。对于缩放，一种更简单的方法是使用缩放 css 函数来缩放 map 和标记。

html

<!DOCTYPE html>
<!-- saved from url=(0036)http://www.webdesign-host.ch/thomas/ -->
<html lang="de"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <script src="./CustomMap (GTA5)_files/jquery.min.js.download"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CustomMap (GTA5)</title>
    <link rel="stylesheet" type="text/css" href="./CustomMap (GTA5)_files/index.css">
    <script src="./CustomMap (GTA5)_files/zoom.js.download"></script>
    <script src="./CustomMap (GTA5)_files/setmarker.js.download"></script>
    <script src="./CustomMap (GTA5)_files/jquery.elevatezoom.js.download"></script>
  </head>
  <body cz-shortcut-listen="true">

    <div class="menu" id="menu">    

        <img id="btn1" alt="klickmich" class="menubuttons" src="./CustomMap (GTA5)_files/gruen.png"> <img id="btn2" alt="klickmich" class="menubuttons" src="./CustomMap (GTA5)_files/blau.png"> <img id="btn3" alt="klickmich" class="menubuttons" src="./CustomMap (GTA5)_files/rot.png"> <img id="btn4" alt="klickmich" class="menubuttons" src="./CustomMap (GTA5)_files/gelb.png">     
    </div>
    <div class="container">     
        <div id="mapareaid" class="maparea">    

            <!--<img id="map" class="map" style="width: 4833.54px; height: 2310.94px;" src="./CustomMap (GTA5)_files/map.jpg" alt="Dies ist eine gigantische Map von GTA V. Schade, dass du das nicht sehen kannst.">-->
            <div id="MarkerBox"></div>
            <div id="InfoBox">
        </div>
    </div>
    <!-- Marker Stuff -->

    <div id="InfoBox">
        <div class="infoContainer" style="visibility: hidden; display: none; top: 0px; left: 0px;">

            <div class="strukturContainer">
                <div class="infotitel"><h1>Titel</h1></div>

                <div class="bildcontainer"> 
                    <div class="infobild"></div>
                    <div class="infobild"></div>
                    <div class="infobild"></div>    
                </div>  

                <div class="infobeschreibung"> 
                     <textarea>Gib mir eine informative Information.</textarea>
                </div>      
            </div>  
        </div>  
    </div>

    <!-- Template to generate InfoBox content -->
    <div class="templateinfobox" style="visibility: hidden;">
        <div class="infoContainer">

            <div class="strukturContainer">
                <div class="infotitel"><h1>Titel</h1></div>

                <div class="bildcontainer"> 
                    <div class="infobild"></div>
                    <div class="infobild"></div>
                    <div class="infobild"></div>    
                </div>  

                <div class="infobeschreibung"> 
                     <textarea>Gib mir eine informative Information.</textarea>
                </div>      
            </div>  
        </div>  
    </div>

    <div class="werkzeugkiste" style="visibility: hidden;">
        <div class="werkzeugContainer">
            <div class="werkzeug1"></div>
            <div class="werkzeug2"></div>
        </div>
    </div>

  </body></html>

CSS

*
{
    margin: 0;
    padding: 0;
}
.container
{
    float: left;
    width: 1365px;  
}

.maparea
{
    float: left;
    width: auto;
    height: auto;   
    overflow: hidden;
}

.map
{
    height: auto;
}

.menu
{   
    width: 100%;
    height: 75px;
    position: fixed;    
    background-color: white;
    border: 2px solid blue;
    border-left: 0;
    border-right: 0;
    margin: 0 auto;
    z-index: 100;
}

.menubuttons
{
    float: left;
    margin-left: 55px;
    margin-top: 10px;
}

.infoContainer
{
    position: absolute;
    width: 350px;
    z-index: 1;
    display: none;
}

.strukturContainer
{
    float: left;
    width: 350px;
    z-index: 1;
}

.infotitel
{
    float: left;
    width: 346px;
    height: 50px;
    border-top: 2px solid black;
    border-left: 2px solid black;
    border-right: 2px solid black;
    background-color: yellow;
    text-align: center;
    z-index: 1;
}

.bildcontainer
{
    float: left;
    width: 346px;
    height: 100px;
    background-color: red;
    border-left: 2px solid black;
    border-right: 2px solid black;
    z-index: 1;
}

.infobild
{
    float: left;
    width: 33%;
    height: 100%;   
    z-index: 1;
}


.infobeschreibung
{
    width: 346px;
    height: 300px;
    float: left;
    background-color: green;
    border-left: 2px solid black;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    z-index: 1;
}

textarea
{
    max-width: 100%;
    max-height: 100%;
    min-width: 100%;
    min-height: 100%;
    z-index: 1;
}


#mapareaid{
    background: url('map.jpg');
    background-size:100%;
    width: 2000px;
    height: 2000px;
    position: relative;
}

#MarkerBox{
    width: 100%;
    height: 100%;
}

设置标记.js

$(document).ready( function() {

    var halfMarkerSize = 15;

    var currentSelection = 0;
    var pictureArray = ["default.png", "gruen.png", "blau.png", "rot.png", "gelb.png"];

    var currentMousePos = { x: -1, y: -1 };

    var currentScrollPos = 0;

    var markerCountID = 0;
    var markerID = null;

    var x = -1;
    var y = -1;

    var markerBindClick = function()
    {       
        $("#MarkerBox img").each(function(){
            $(this).off("mousedown").on("mousedown", function(e){
                switch(e.which)
                {
                    case 1:
                        //Left Mouse button pressed.
                        x = currentMousePos.x + 15;
                        y = currentMousePos.y - 5;

                        markerID = e.target.id.replace('Marker_', '');  
                        HideInfoBox();
                        ShowInfoBox();
                        break;
                    case 2:
                        //Middle Mouse button pressed.;
                        break;
                    case 3:
                        //Right Mouse button pressed.
                        break;
                }
            });
            /*$(this).off("click").on("click", function(e){

                x = currentMousePos.x + 15;
                y = currentMousePos.y - 5;

                markerID = e.target.id.replace('Marker_', '');  
                HideInfoBox();
                ShowInfoBox();  

            });*/
        });
    }

    var HideInfoBox = function()
    {
        $('#InfoBox .infoContainer').each(function(){
            //alert($(this).attr("class"));
            $(this).css("visibility", "hidden");
            $(this).css("display", "none");
        });
    }

    var truncateDecimals = function (number, digits) {
        var multiplier = Math.pow(10, digits),
            adjustedNum = number * multiplier,
            truncatedNum = Math[adjustedNum < 0 ? 'ceil' : 'floor'](adjustedNum);

        return truncatedNum / multiplier;
    };


    var ShowInfoBox = function()
    {       
        var count = 0;
        $('#InfoBox .infoContainer').each(function(){
            //alert($(this).attr("class"));
            if(markerID == count)
            {
                $(this).css("visibility", "visible");
                $(this).css("top", y - 5);
                $(this).css("left", x + 15);
                $(this).css("display", "block");

                //style: 'top: '+y+'px;'+' left: '+x+'px; position: absolute;'

            }
            count++;
            if(markerID >= count){ return; }            
        });
    }

    //Loading directly...
    $("#menu img").each(function(){
        //alert("TEST");
        $(this).on("click", function(){
            //alert("TEST");
            if($(this).attr("id") == "btn1")
            {
                currentSelection = 1;
            }else if($(this).attr("id") == "btn2")
            {
                currentSelection = 2;
            }else if($(this).attr("id") == "btn3")
            {
                currentSelection = 3;
            }else if($(this).attr("id") == "btn4")
            {
                currentSelection = 4;
            }
        });
    });

    //WHY NOOOOO WOOOORKK????
    /*$( "#Marker_0" ).click(function(e) {
        alert( "Handler for .click() called." );
    });*/

    //Bei jeder Mousebewegung speichern wir den aktuellen ort ab.
    $("#mapareaid").on( "mousemove", function( e ) {
        currentMousePos.x = e.pageX;
        currentMousePos.y = e.pageY;

        //console.log(currentMousePos.x);
    });

    /*$('#map').click(function(e) {
        var offset = $(this).offset();
        alert(e.pageX - offset.left);
        alert(e.pageY - offset.top);
    });*/

    //Hier generieren wir ein neues img Tag und fügen es zu unserer MarkerBox hinzu.
    //Aufgaben: Die ID muss dringend einzigartig gestaltet werden. (Diese Änderung beinflust die positionierung nicht)
    // ^ sollte funktionieren
    $("#mapareaid").click(function(e){

        if(currentSelection != 0)
        {
            x = currentMousePos.x - halfMarkerSize;
            y = currentMousePos.y - halfMarkerSize;

            xPerc = x / $('#mapareaid').width() * 100;
            yPerc = y / $('#mapareaid').height() * 100;

            var img = $('<img />', { 
            id: 'Marker_'+markerCountID+'',
            src: 'images/'+pictureArray[currentSelection]+'',
            alt: 'Map Marker',
            style: 'top: '+truncateDecimals(yPerc,1)+'%;'+' left: '+truncateDecimals(xPerc,1)+'%; position: absolute;'
            });
            img.appendTo($('#MarkerBox'));
            markerCountID++;
            currentSelection = 0;
            markerBindClick();

            $('#InfoBox').append($('.templateinfobox').html()); 
        }

        if(currentSelection == 0)
        {
            HideInfoBox();
        }   

    });

});

缩放.js

$(document).ready( function() {

        var currentZoomLevel = 0;

        var scaleRatio = 1.2;
        var scaleDownRatio = 5/6;

        var windowWidth = $(window).width();
        var windowHeight = $(window).height();
        //Set the default map width to window.size
        $("#mapareaid").width(windowWidth);
        $("#mapareaid").height(windowHeight);

        //Set resize function...
        $(window).resize(function(){
            windowWidth = $(window).width();
            windowHeight = $(window).height();
        });

        //Set the current mapWidth/Height
        var mapWidth = $("#mapareaid").width();
        var mapHeight = $("#mapareaid").height();


        //Es gibt verschiedene möglichkeiten um eigene funktionen zu deklarieren in JQuery sowie JS.
        var markersScallingUp = function()
        {
            $("#MarkerBox img").each(function(){
                //$(this).css("transform", "scale(" + scaleMarkers+ ")" );
                //$(this).css("transform", "scale(" + scaleRatio * (currentZoomLevel + 1)+ ")" );
                $(this).css("transform", "scale(" + scaleDownRatio / (currentZoomLevel + 1)+ ")" );

                //$(this).css("top", $(this).offset().top * 1.2);
                //$(this).css("left", $(this).offset().left * 1.2);
            });
        }

        var markersScallingDown = function()
        {
            $("#MarkerBox img").each(function(){
                //$(this).css("transform", "scale(" + scaleDownRatio / (currentZoomLevel + 1)+ ")" );

                $(this).css("transform", "scale(" + scaleDownRatio / (currentZoomLevel)+ ")" );

                //$(this).css("top", $(this).offset().top / 1.2);
                //$(this).css("left", $(this).offset().left / 1.2);
            });
        }


        var infoScallingUp = function()
        {
            $("#InfoBox .infoContainer").each(function(){
                $(this).css("top", $(this).offset().top * 1.2);
                $(this).css("left", $(this).offset().left * 1.2);
            });
        }

        var infoScallingDown = function()
        {
            $("#InfoBox .infoContainer").each(function(){
                $(this).css("top", $(this).offset().top / 1.2);
                $(this).css("left", $(this).offset().left / 1.2);
            });
        }


        $(document).keydown(function(e){


            switch(e.which)
            {
                case 107:   
                    /*$('#map').elevateZoom({
                        zoomType: "inner",
                        cursor: "crosshair",
                        zoomWindowFadeIn: 500,
                        zoomWindowFadeOut: 750
                    }); */
                    if(currentZoomLevel <= 8){

                        $("#mapareaid").focus();    
                        //$("#map").width(mapWidth * 1.2);
                        //$("#map").height(mapHeight * 1.2);    
                        //scaleMap *= 1.2 * (currentZoomLevel + 1)
                        //scaleMarkers /= 1.2 * (currentZoomLevel + 1)
                        $("#mapareaid").css("transform", "scale(" + scaleRatio * (currentZoomLevel + 1)+ ")" );

                        //alert(differenceX);
                        //alert(differenceX);
                        markersScallingUp();
                        //infoScallingUp();
                        //mapWidth = $("#mapareaid").width();
                        //mapHeight = $("#mapareaid").height(); 

                        //$(window).scrollTop($(window).scrollTop()+100);
                        //$(window).scrollLeft($(window).scrollLeft()+(60 * currentZoomLevel));
                        currentZoomLevel++;
                    }
                break;

                case 109:   
                    if(currentZoomLevel >= 1){
                        $("#mapareaid").focus();
                        //$("#mapareaid").css("width", mapWidth / 1.2);
                        //$("#mapareaid").css("height", mapHeight / 1.2);
                        //$("#map").width(mapWidth / 1.2);
                        //$("#map").height(mapHeight / 1.2);    
                        //mapWidth = $("#mapareaid").width();
                        //mapHeight = $("#mapareaid").height(); 

                        //scaleMap /= 1.2 * (currentZoomLevel + 1)
                        //scaleMarkers *= 1.2 * (currentZoomLevel + 1)
                        $("#mapareaid").css("transform", "scale(" + scaleRatio * (currentZoomLevel)+ ")" );

                        markersScallingDown();
                        infoScallingDown();
                        //$(window).scrollTop($(window).scrollTop()-100);
                        //$(window).scrollLeft($(window).scrollLeft()-(60 * currentZoomLevel));
                        currentZoomLevel--;
                    }
                break;
            }           
        });

    });

关于jquery - 缩放后标记不完全在同一点上。自定义 map GTA5，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49029255/

上一篇：javascript - bootstrap 标签输入加载失败

下一篇：html - 垂直对齐元素以匹配相邻元素的中线

相关文章：

html - % 行高问题

css - 在 MVC 中使用 Foundation 5 作为默认模板而不是 Bootstrap

html - 如何在悬停时更改 z-index 值？

jquery - onHover 字体颜色不变

javascript - 如何更改 datepicker jQuery UI 中显示的日期范围？

javascript - 处理焦点行的按键事件

css - 内联对齐 div

java - 链接到图像网址有效，但无法显示该图像

javascript - 创建两个不同的标题——粘性/滚动和顶部

javascript - 如何使用 jQuery 更改 CSS？

©2024 IT工具网  联系我们